babylon 里面加gltf 模型

Posted 2022-08-09 qianbo_insist

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了babylon 里面加gltf 模型相关的知识，希望对你有一定的参考价值。

babylonjs

高光

先上图看结果，好看很多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js实例学习：创建基础材料和阴影</title>
<style>
html,
body 
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;

canvas 
    width: 100%;
    height: 100%;
    -ms-touch-action: none;
    touch-action: none;

</style>
</head>
<body>
<canvas></canvas>
<script src="js/babylon.js"></script>
<script>
var canvas = document.querySelector("canvas");
var engine = new BABYLON.Engine(canvas, true);

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.2, 0.2, 0.2);

var camera = new BABYLON.FreeCamera("mainCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);

var light = new BABYLON.SpotLight("light", new BABYLON.Vector3(0, 14, -1), new BABYLON.Vector3(0, -1, 0), 1, 16, scene);
light.intensity = 0.9;

var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseColor = new BABYLON.Color3(0.6, 0.2, 0.2);
sphereMaterial.specularPower = 128;

var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);
sphere.position.y = 1;
sphere.material = sphereMaterial;

var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.3, 0.1);

var ground = BABYLON.Mesh.CreateGround("ground", 10, 10, 2, scene);
ground.material = groundMaterial;
ground.receiveShadows = true;

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.setDarkness(0.4);
shadowGenerator.getShadowMap().renderList.push(sphere);
shadowGenerator.useBlurVarianceShadowMap = true;
shadowGenerator.blurScale = 2;
shadowGenerator.bias = 0.01;

engine.runRenderLoop(function() 
    scene.render();
);

window.addEventListener("resize", function() 
    engine.resize();
)
</script>
</body>
</html>

天空盒

 var skybox = BABYLON.Mesh.CreateBox("skyBox", 6000.0, scene);
      var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
      skyboxMaterial.backFaceCulling = false;
      skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("TropicalSunnyDay/TropicalSunnyDay", scene);
      skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
      skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
      skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
      skyboxMaterial.disableLighting = true;
      skybox.material = skyboxMaterial;

加载模型文件

babylonjs里面加模型文件等等比较简单

var delayCreateScene = function () 
    // Create a scene.
    var scene = new BABYLON.Scene(engine);

    // Create a default skybox with an environment.
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
    var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);

    // Append glTF model to scene.
    BABYLON.SceneLoader.Append("scenes/BoomBox/", "BoomBox.gltf", scene, function (scene) 
        // Create a default arc rotate camera and light.
        scene.createDefaultCameraOrLight(true, true, true);

        // The default camera looks at the back of the asset.
        // Rotate the camera by 180 degrees to the front of the asset.
        scene.activeCamera.alpha += Math.PI;
    );

    return scene;
;

code

不使用天空盒，使用默认环境，如下图所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js</title>
<style>
html,
body 
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;

canvas 
    width: 100%;
    height: 100%;
    -ms-touch-action: none;
    touch-action: none;

</style>
</head>
<body>
<canvas></canvas>
<!-- <script src="js/babylon.js"></script> -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script>
var canvas = document.querySelector("canvas");
var engine = new BABYLON.Engine(canvas, true);

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.2, 0.2, 0.2);

var camera = new BABYLON.FreeCamera("mainCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);

var light = new BABYLON.SpotLight("light", new BABYLON.Vector3(0, 14, -1), new BABYLON.Vector3(0, -1, 0), 1, 16, scene);
light.intensity = 0.9;

var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseColor = new BABYLON.Color3(0.6, 0.2, 0.2);
sphereMaterial.specularPower = 128;

var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);
sphere.position.y = 1;
sphere.position.x = -10;
sphere.material = sphereMaterial;

var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.3, 0.1);

var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 2, scene);
ground.material = groundMaterial;
ground.receiveShadows = true;

var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.setDarkness(0.4);
shadowGenerator.getShadowMap().renderList.push(sphere);
shadowGenerator.useBlurVarianceShadowMap = true;
shadowGenerator.blurScale = 2;
shadowGenerator.bias = 0.01;
  // Append glTF model to scene.

  BABYLON.SceneLoader.ImportMeshAsync("", "/bed/", "bed.gltf").then((result)=>
    result.meshes[0].position.x = 10;
    result.meshes[0].position.y = 0;
   // const myMesh1 = scene.getMeshByName("myMesh_1");
   result.meshes[0].scaling = new BABYLON.Vector3(100,100,100);
//或者单独赋值
   
    //result.meshes[0].rotation.y = Math.PI / 2;
    scene.createDefaultCameraOrLight(true, true, true);
    scene.createDefaultEnvironment();
    scene.activeCamera.position.y +=100;
   // scene.activeCamera.setPosition(new BABYLON.Vector3(10,420,10));
   // scene.activeCamera.setTarget(new BABYLON.Vector3(0,0,0));
  ); //Name of the 

//   BABYLON.SceneLoader.Append("/bed/", "bed.gltf", scene, function (scene) 
//         // Create a default arc rotate camera and light.
//         scene.createDefaultCameraOrLight(true, true, true);
        
//         // The default camera looks at the back of the asset.
//         // Rotate the camera by 180 degrees to the front of the asset.
//         //scene.activeCamera.alpha += Math.PI;
//     );


    // var skybox = BABYLON.Mesh.CreateBox("skyBox", 2500.0, scene);
    //   var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    //   skyboxMaterial.backFaceCulling = false;
    //   skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
    //   skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    //   skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    //   skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    //   skyboxMaterial.disableLighting = true;
    //   skybox.material = skyboxMaterial;



engine.runRenderLoop(function() 
    scene.render();
);

window.addEventListener("resize", function() 
    engine.resize();
)
</script>
</body>
</html>

以上是关于babylon 里面加gltf 模型的主要内容，如果未能解决你的问题，请参考以下文章

用Babylon.js如何加载obj模型

vue中加载three.js的gltf模型

cesium加载gltf模型点击以及列表点击定位弹窗

DirectX11第九篇光照模型——高光