化石原创文章,转载请注明来源并保留原文链接


下面这段代码是使用Babylon.js加载obj文件,并且使用上硬盘上的一张图。场景中使用了环境光。刚刚知道,Babylon.js居然使用的是左手坐标系。哈,没想到!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
	<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function(){
            var canvas = document.getElementById('renderCanvas');
            var engine = new BABYLON.Engine(canvas, true);

            var createScene = function(){
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 0, 10), scene);
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(canvas, false);
				
				//environment light
				var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);
				
				var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
				myMaterial.diffuseTexture = new BABYLON.Texture("./texture/uv.jpg", scene);
				
				var mesh = null;
				
				BABYLON.SceneLoader.LoadAssetContainer("./models/", "triangular.obj", scene, function (container) {
					var meshes = container.meshes;
					var materials = container.materials;
					
					mesh = meshes[0];
					mesh.material = myMaterial;
					// Adds all elements to the scene
					container.addAllToScene();
				});

                return scene;
            }

            var scene = createScene();
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
</body>
</html>

化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


在3ds max给一个模型附上不同的材质,比如不同的面或者不同的部分,再导出到Unity3d的时候就会产生submesh。原则是使用同一个材质的面会组进同一个submesh。

Unity官方的说法是(官方文档的Mesh.trangles):

Mesh.trangles:
这个数组包含了网格(mesh)中的所有的三角形。

这个数组是一系列索引到顶点数组(vertex array)的值。这个三角形数组里面元素的数量必定是3的倍数(3个顶点组成一个三角形)。顶点可以通过索引值来共享。如果网格包含了多个子网格(sub-mesh)或者材质,那么三角形数组会包含所有的属于子网格的三角形。

如果是原来没有submesh的模型,在Unity中你可以用
Mesh.subMeshCount、Mesh.setTriangles组合去设置同样的效果,当然,同时你需要给每个subMesh一个自己的材质。这个可以通过Renderer的materials来实现。

Unity官方说法(Mesh.SetTriangles)

子网格代表了一系列使用同一个材质的三角形。当一个网格被用在带多个材质(material)的Renderer组件上的时候,你必须保证每个子网格都对应一个材质。

在babylon.js里面,同样有类似的理念:

https://doc.babylonjs.com/how_to/multi_materials


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


Babylon.js有编辑器,刚刚试了一下(3.1.1)版本,版本号可以通过编辑器的相关菜单看到。对于这种3D场景编辑器(2D一样),一般都有外部资源的导入过程。Babylon这块功能在菜单Scene下方的import mesh from…。因为没有找到介绍这个功能的文档,所以直接暴力尝试fbx格式(比较常用,Unity3d、Unreal Engine4都能支持),编辑器直接给出出错信息,通过出错信息知道这个版本仅支持babylon、glTF、glf格式。第一个格式我估计软件支持少,大致了解了一下知道Blender可以装python插件导出。至于glTF、glf的格式,我这里搜集了几个地方,直接可以用来测试工程。

1、Cesium在github上的工程目录下,有Model,glTF和glb都有。

https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Apps/SampleData/models

2、Babylon的github

https://github.com/BabylonJS/MeshesLibrary


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


刚刚嵌入过Three.js,我们又来镶嵌Babylon.js。话说当年玩具型的小东西,几年不看都长这么大了。还具备了编辑器,而且同时支持在线和桌面(虽然今天跑桌面遇到问题,还没解掉)。文档也很丰富。真是不能小觑了。当年的Unity3d,不也曾经是玩具吗?

 
   
   
  

在WordPress里面内嵌类似Babylon.js,或者Three.js,只要使用WordPress的Custom HTML块即可(我使用的是Block编辑方式)。比如,上面的3D场景显示的代码,就是一段用<pre></pre>包起来的自定义html代码。全部代码(在一个Custom HTML中)如下:

<pre> 
  <canvas id="renderCanvas" width="640" height="480"></canvas> 
  <script src="https://cdn.bootcss.com/babylonjs/4.0.3/babylon.js"></script> 
  <script> 
  // Get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
var createScene = function(){
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // Return the created scene
    return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
    engine.resize();
});
  </script>
</pre>

注:上面的3D场景可以通过鼠标控制转动。


化石原创文章,转载请注明来源并保留原文链接