ゲームワールドWebGLまたはThree.jsとBabylon.js

はじめに

• three.js Pioneerおよび最も有名なライブラリ。
• babylon.js three.jsにふさわしいライバル
• turbulenz.comは 、 three.jsやthree.jsとともに最も人気のある3つの間でよく言及されていthree.js 、よく、 githubの星の数はそれ自体をthree.jsています。
  タービュレンツは主におもちゃを作成するためのライブラリとして人気があり、特に地震の注目を集めました

• playcanvas.com素敵なフレームワーク、素敵なデモ。 Gangnam Style 、彼らは良いデモを得ました。
• scenejs.org素敵なライブラリ、おそらくクリエーターはしばしば医学に関連するモデルを作成しなければならなかったでしょう。 多くの準備された例。 構文は、 jqueryプラグインの初期化に似ています。
• voxel.js
• www.senchalabs.org/philogl一見すると、これらの例は期待した印象を与えませんでした。
• www.glge.org別のライブラリ。
• www.goocreate.com/blogオンラインエディター、インポーター。
• www.kickjs.orgで統計についてここで言及します。

1.基本要素

シーン

 var renderer = new THREE.WebGLRenderer( {antialias:true} ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); 

 <canvas id="renderCanvas"></canvas> 

 var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); 

 scene = new BABYLON.Scene(engine); 

 var scene = new THREE.Scene(); scene.add( sceneMesh ); 

 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } 

  engine.runRenderLoop(function () { scene.render(); stats.innerHTML = "FPS: <b>" + BABYLON.Tools.GetFps().toFixed() + "</b> }); 

プリミティブ

 var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); sphere.material = new BABYLON.StandardMaterial("texture1", scene); sphere.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // sphere.material.alpha = 0.3; 

 var cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial({ color: 0x00ff00 }) ); scene.add( cube ); 

  mesh.position.x = 1; mesh.position.y = 1; mesh.position.z = 1; 

 mesh.position.set(1, 1, 1); mesh.rotation.set(1, 1, 1); 

 mesh.position = new BABYLON.Vector3(1, 1, 1); 

カメラ

• FreeCamera実際には、透視投影が表示されますが、キーをコントロールに割り当てることができます。これは、ファーストパーソンゲームでの使用に便利です。詳細については、 キャラクターの動きに関する章を参照してください。
• ArcRotateCamera以前にhand.js接続した場合、カメラはマウスカーソルまたはセンサーを使用して、特定の軸を中心とした回転を想定します。

• PerspectiveCameraは透視投影カメラであり、 FreeCameraわずかに単純化された類似物です。 比率と視野に依存し、実世界を表示します。
• OrthographicCamera射影のカメラ。シーン内のすべてのオブジェクトを同じ比率で表示します。

 new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 ); 

 new THREE.CombinedCamera( width, height, fov, near, far, orthoNear, orthoFar ) 

照明

1. Point Light -スポットライト、ライトスポットをシミュレートします。
2. Directional Light -指向性のわずかに拡散したライト。
3. Spot Light -たとえば懐中電灯の模倣のように、星の動きを模倣できます。
4. HemisphericLight現実的な環境をシミュレートするのに適しており、均一に照らします。

 //Point Light new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene); //Directional Light new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene); //Spot Light new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); //Hemispheric Light new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene); 

1. AmbientLightシーン内のすべてのオブジェクトに適用される一般的な照明を表します。
2. AreaLightは、幅と高さを測定し、空間に向けられた空間光源を表します
3. DirectionalLight直接（有向）照明のソースを表します-オブジェクトの方向の平行光線のストリーム。
4. HemisphereLight半球照明を導入
5. SpotLightスポットライトを表します。

 //ambientLight var ambientLight = new THREE.AmbientLight( 0x404040 ); //AreaLight areaLight1 = new THREE.AreaLight( 0xffffff, 1 ); areaLight1.position.set( 0.0001, 10.0001, -18.5001 ); areaLight1.width = 10; //DirectionalLight var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); directionalLight.position.set( 0, 1, 0 ); //PointLight var pointLight = new THREE.PointLight( 0xff0000, 1, 100 ); pointLight.position.set( 50, 50, 50 ); //PointLight var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 100, 1000, 100 ); 

素材

 //      var materialSphere6 = new BABYLON.StandardMaterial("texture1", scene); materialSphere6.diffuseTexture = new BABYLON.Texture("./tree.png", scene); //         var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene); materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red materialSphere2.alpha = 0.3; 

• MeshBasicMaterialプリミティブに任意の色を割り当てるだけです
• MeshNormalMaterialシェーディングプロパティを持つマテリアルで、色の混合を組み合わせます。
• MeshDepthMaterialワイヤフレームプロパティを持つマテリアル、白黒に見える
• MeshLambertMaterial光沢のない表面の材料
• MeshPhongMaterial光沢のある表面の材料
• MeshFaceMaterial他のタイプのマテリアルを組み合わせて、各ポリゴンに独自のマテリアルを割り当てることができます。

 <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.min.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); renderer.render(scene, camera); }; render(); </script> </body> </html> 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> #renderCanvas { width: 100%; height: 100%; } </style> <script src="babylon.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0, 1, 0); var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = .5; var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); sphere.position.y = 1; var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); return scene; }; var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); </script> </body> </html> 

2.グループ化

 var mesh = new BABYLON.Mesh.CreateBox('name', 1.0, scene); mesh.position = new BABYLON.Vector3( 1, -1, 5); mesh.parent = camera; 

 var parent = new THREE.Object3D(); parent.add( camera ); parent.add( mesh ); parent.position.y = 10; 

3.キャラクターの動き

 camera.keysUp = [38, 87]; camera.keysDown = [40, 83]; camera.keysLeft = [37, 65]; camera.keysRight = [39, 68]; 

 var pitchObject = new THREE.Object3D(); pitchObject.add( camera ); var yawObject = new THREE.Object3D(); yawObject.position.y = 10; yawObject.add( pitchObject ); var onMouseMove = function ( event ) { yawObject.rotation.y -= event.movementX * 0.002; pitchObject.rotation.x -= event.movementY * 0.002; pitchObject.rotation.x = Math.max( - Math.PI / 2, Math.min( Math.PI / 2, pitchObject.rotation.x ) ); }; document.addEventListener( 'mousemove', onMouseMove, false ); 

4.粒子

  var particleSystem = new BABYLON.ParticleSystem("particles", 1000, scene); particleSystem.particleTexture = new BABYLON.Texture("./img/flare.png", scene); particleSystem.emitter = obj; //  ,      //     particleSystem.minEmitBox = new BABYLON.Vector3(-0.5, 1, -0.5); // Starting all from particleSystem.maxEmitBox = new BABYLON.Vector3(0.5, 1, 0.5); // To... //   particleSystem.color1 = new BABYLON.Color4(1, 0.5, 0, 1.0); particleSystem.color2 = new BABYLON.Color4(1, 0.5, 0, 1.0); particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0.0); //       particleSystem.minSize = 0.3; particleSystem.maxSize = 1; //    ,      max  min particleSystem.minLifeTime = 0.2; particleSystem.maxLifeTime = 0.4; //   particleSystem.emitRate = 600; particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; particleSystem.gravity = new BABYLON.Vector3(0, 0, 0); //      particleSystem.direction1 = new BABYLON.Vector3(0, 4, 0); particleSystem.direction2 = new BABYLON.Vector3(0, 4, 0); particleSystem.minAngularSpeed = 0; particleSystem.maxAngularSpeed = Math.PI; //  particleSystem.minEmitPower = 1; particleSystem.maxEmitPower = 3; particleSystem.updateSpeed = 0.007; particleSystem.start(); 

5.アニメーション-1

 scene.registerBeforeRender(function () { mesh.position.x = 100 * Math.cos(alpha); donutmesh.position.y = 5; mesh.position.z = 100 * Math.sin(alpha); alpha += 0.01; }); 

 var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); 

6.アニメーション-2

  //      30    var animationBox = new BABYLON.Animation("tutoAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); //     var keys = []; keys.push({ frame: 0, value: 1 }); keys.push({ frame: 20, value: 0.2 }); keys.push({ frame: 100, value: 1 }); //     animationBox.setKeys(keys); box1.animations.push(animationBox); //  scene.beginAnimation(box1, 0, 100, true); 

 var loader = new THREE.JSONLoader(); loader.load( "models/skinned/scout/scout.js", function( geometry ) { for ( var i = 0; i < geometry.animation.hierarchy.length; i ++ ) { var bone = geometry.animation.hierarchy[ i ]; var first = bone.keys[ 0 ]; var last = bone.keys[ bone.keys.length - 1 ]; last.pos = first.pos; last.rot = first.rot; last.scl = first.scl; } geometry.computeBoundingBox(); THREE.AnimationHandler.add( geometry.animation ); var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial() ); mesh.position.set( 400, -250 - geometry.boundingBox.min.y * 7, 0 ); scene.add( mesh ); animation = new THREE.Animation( mesh, geometry.animation.name ); animation.play(); }); 

7.シンプルな地形

  var groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.diffuseTexture = new BABYLON.Texture("./img/earth.jpg", scene); var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "./img/heightMap.jpg", 200, 200, 250, 0, 10, scene, false); ground.material = groundMaterial; 

 var mesh = new THREEx.MontainsArena() scene.add(mesh) 

 var geometry = THREEx.Terrain.heightMapToPlaneGeometry(heightMap) THREEx.Terrain.heightMapToVertexColor(heightMap, geometry) var material = new THREE.MeshPhongMaterial({ shading :THREE.SmoothShading, vertexColors :THREE.VertexColors}); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); 

8.静的衝突

 if ( mesh.position.y < 10 ) mesh.position.y = 10; 

9.動的衝突

 // meshList -     scene.registerBeforeRender(function () { for (var i=0; i < meshList.length; i++ ){ if(bullet.intersectsMesh(meshList[i], true)) console.log(' , :' meshList[i].position); } }); 

 function animate() { requestAnimationFrame(animate); for(var res = 0; res < meshList.length; res++) { var intersections = raycaster.intersectObject(meshList[res]); if (intersections.length > 0) console.log(' , :' ballMeshes[i].position); } renderer.render(scene, camera); } 

10.モデルのインポート

1. babylon.jsでbabylon.jsのエクスポーターをダウンロードします
2. ディレクトリ./Blender/2.XX/scripts/addonsコピーし./Blender/2.XX/scripts/addons
3. Blenderを再起動し、 Ctrl+Alt+U -> Ctrl+Alt+UまたはCtrl+Alt+U ]の[ ]タブで、目的のチェックマークを設定します。 その後、メニューは目的の形式にエクスポートできます。

 // assetsManager var assetsManager = new BABYLON.AssetsManager(scene); //    var meshTask = assetsManager.addMeshTask("obj task", "", "./", "obj.babylon"); //    onSuccess  onError : meshTask.onSuccess = function (task) { task.loadedMeshes[0].position = new BABYLON.Vector3(0, 0, 0); } // assetsManager    onFinish, onTaskSuccess, onTaskError //           assetsManager.onFinish = function (tasks) { engine.runRenderLoop(function () { scene.render(); }); }; 

 var loader = new THREE.ColladaLoader(); loader.load("obj.dae", function (result) { scene.add(result.scene); }); 

 loader = new THREE.JSONLoader(); loader.load( "./model.js", function( geometry ) { mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() ); mesh.scale.set( 10, 10, 10 ); mesh.position.y = 150; scene.add( mesh ); }); 

  var loader = new THREE.OBJLoader(); loader.load( './model.obj', function ( object ){ scene.add( object ); }); 

 var loader = new THREE.SceneLoader(); loader.load('jet.json', function(res) { scene.add(res.scene); renderer.render(res.scene, camera); }); 

 var loader = new THREE.BabylonLoader( manager ); loader.load( 'models/babylon/skull.babylon', function ( babylonScene ) { scene.add( babylonScene ); }, onProgress, onError ); 

 var manager = new THREE.LoadingManager(); manager.onProgress = function (item, loaded, total) { console.log( item, loaded, total ); }; var loader = new THREE.OBJLoader( manager ); loader.load( './model.obj', function (object) { }); 

11. .

• oimo.js — .
• oimo.js
• cannon.js
• , three.js .
• ammo.js
• Physijs ammo.js
• JigLibJS C/C++ JigLib
• bullet.js

 // scene = new BABYLON.Scene(engine); scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin()); //    grount.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, move:false}); //      sphere.setPhysicsState({impostor:BABYLON.PhysicsEngine.SphereImpostor, move:true, mass:1, friction:0.5, restitution:0.5}); box.setPhysicsState({impostor:BABYLON.PhysicsEngine.BoxImpostor, move:true, mass:1, friction:0.5, restitution:0.1}); 

 //   oimo.js var onRenderFcts= []; var world = new OIMO.World(); //      onRenderFcts.push(function(delta){ world.step() }); //  IOMO.Body   three.js var mesh = new THREE.Mesh( new THREE.CubeGeometry(1,1,1), new THREE.MeshNormalMaterial() ) scene.add(mesh) var body = THREEx.Iomo.createBodyFromMesh(world, mesh) var updater = new THREEx.Iomo.Body2MeshUpdater(body, mesh) //         updater.update() 

12. .

 // var shadowGenerator = new BABYLON.ShadowGenerator(1024, light); shadowGenerator.getShadowMap().renderList.push(torus); ground.receiveShadows = true; // 

 // var mesh = new THREE.Mesh( new THREE.BoxGeometry( 1500, 220, 150 ), new THREE.MeshPhongMaterial({color:0xffdd99})); mesh.position.z = 20; mesh.castShadow = true; mesh.receiveShadow = true; scene.add( mesh ); // scene.fog = new THREE.Fog( 0x59472b, 1000, 500 ); // - 2 scene.fog = new THREE.FogExp2(0xD6F1FF, 0.0005);