物理エンジンを使って 3dに息を吹き込む
DESCRIPTION
Three.js勉強会 vol.1で発表した資料です。TRANSCRIPT
![Page 1: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/1.jpg)
物理エンジンを使って3Dに息を吹き込む
13年12月12日木曜日
![Page 2: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/2.jpg)
自己紹介
•面白法人カヤックHTMLファイ部所属比留間 和也
•最近は3D/JS/Unityばかりで、あんまりHTML書いてません;
13年12月12日木曜日
![Page 3: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/3.jpg)
JavaScriptの新しい教科書本を書きました
13年12月12日木曜日
![Page 4: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/4.jpg)
最近作ったもの
13年12月12日木曜日
![Page 5: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/5.jpg)
Agenda
•作ったもの紹介•物理エンジンの仕組み(超簡易)• CANNON.jsで物理演算• Three.jsのCSS3DRendererで3D
13年12月12日木曜日
![Page 6: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/6.jpg)
CSSでレンダリングされたほんとに投げれるサイコロ
13年12月12日木曜日
![Page 7: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/7.jpg)
http://hookmark.in/13年12月12日木曜日
![Page 8: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/8.jpg)
物理エンジンの仕組み1. 剛体に外力(重力など)を働かせる
2. ブロードフェーズ(剛体同士の大まかな衝突検出)
3. ナローフェーズ(剛体同士の詳細な衝突検出)
4. 衝突応答
5. 剛体の更新
6. 1に戻る
13年12月12日木曜日
![Page 9: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/9.jpg)
剛体に外力を働かせる13年12月12日木曜日
![Page 10: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/10.jpg)
ブロードフェーズ13年12月12日木曜日
![Page 11: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/11.jpg)
ブロードフェーズ13年12月12日木曜日
![Page 12: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/12.jpg)
ナローフェーズ13年12月12日木曜日
![Page 13: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/13.jpg)
衝突応答13年12月12日木曜日
![Page 14: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/14.jpg)
衝突応答13年12月12日木曜日
![Page 15: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/15.jpg)
剛体の更新13年12月12日木曜日
![Page 16: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/16.jpg)
CANNON.jsで物理演算
13年12月12日木曜日
![Page 17: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/17.jpg)
世界を作る
13年12月12日木曜日
![Page 18: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/18.jpg)
//Create a CANNON world.world = new CANNON.World();
//Set gravity.world.gravity.set(0, -98.2, 0);
//Set a way of broad phaseworld.broadphase =new CANNON.NaiveBroadphase();
13年12月12日木曜日
![Page 19: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/19.jpg)
剛体を作る
13年12月12日木曜日
![Page 20: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/20.jpg)
//Define a shape of rigid body.var box =new CANNON.Box(new CANNON.Vec3(cubeSize, cubeSize, cubeSize));
//Create a rigid body.var dice =new CANNON.RigidBody(0.3/* mass */, box);
//Set a position of rigid body.dice.position.y = 50;
//Add a rigid body to a world.world.add(dice);
13年12月12日木曜日
![Page 21: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/21.jpg)
//Create a plane as a ground.var plane = new CANNON.Plane();
//Create a ground with mass 0.var ground =new CANNON.RigidBody(0, plane);
//Rotate 90 degree. (as a ground)ground.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0),-Math.PI / 2);
//Add a rigid body to a world.world.add(ground);
13年12月12日木曜日
![Page 22: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/22.jpg)
Three.jsのCSS3DRendererで3D
13年12月12日木曜日
![Page 23: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/23.jpg)
地面を作る
13年12月12日木曜日
![Page 24: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/24.jpg)
//Create a ground with CSS3DObjectvar textureSize = 800;var floorEle = doc.createElement('div');floorEle.style.width = textureSize + 'px';floorEle.style.height = textureSize + 'px';floorEle.style.background = 'url(ground.png) left top repeat';floorEle.style.backgroundSize = textureSize / 20 + 'px ' + textureSize / 20 + 'px';
floorObj = new THREE.CSS3DObject(floorEle);floorObj.position.fromArray([0, 0, 0]);floorObj.rotation.fromArray([Math.PI/2,0,0]);scene.add(floorObj);
13年12月12日木曜日
![Page 25: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/25.jpg)
//Create a ground with CSS3DObjectvar textureSize = 800;var floorEle = doc.createElement('div');floorEle.style.width = textureSize + 'px';floorEle.style.height = textureSize + 'px';floorEle.style.background = 'url(ground.png) left top repeat';floorEle.style.backgroundSize = textureSize / 20 + 'px ' + textureSize / 20 + 'px';
floorObj = new THREE.CSS3DObject(floorEle);floorObj.position.fromArray([0, 0, 0]);floorObj.rotation.fromArray([Math.PI/2,0,0]);scene.add(floorObj);
13年12月12日木曜日
![Page 26: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/26.jpg)
サイコロを作る
13年12月12日木曜日
![Page 27: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/27.jpg)
var boxInfo, el, dice, info, img, face;boxInfo = [{ url: '2.png', position: [-cubeSize,0,0], rotation: [0,Math.PI/2,0] },{ url: '5.png', position: [cubeSize,0,0], rotation: [0,-Math.PI/2,0] },{ url: '1.png', position: [0,cubeSize,0], rotation: [Math.PI/2,0,Math.PI] },{ url: '6.png', position: [0,-cubeSize,0], rotation: [-Math.PI/2,0,Math.PI] },{ url: '3.png', position: [0,0,cubeSize], rotation: [0,Math.PI,0] },{ url: '4.png', position: [0,0,-cubeSize], rotation: [0,0,0] }];
el = document.createElement('div');el.style.width = cubeSize * 2 + 'px';el.style.height = cubeSize * 2 + 'px';dice = new THREE.CSS3DObject(el);
for (var i = 0; i < boxInfo.length; i++) { info = boxInfo[i]; img = document.createElement('img'); img.width = cubeSize * 2; img.src = info.url; face = new THREE.CSS3DObject(img); face.position.fromArray(info.position); face.rotation.fromArray(info.rotation); dice.add(face);}
13年12月12日木曜日
![Page 28: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/28.jpg)
var boxInfo, el, dice, info, img, face;boxInfo = [{ url: '2.png', position: [-cubeSize,0,0], rotation: [0,Math.PI/2,0] },{ url: '5.png', position: [cubeSize,0,0], rotation: [0,-Math.PI/2,0] },{ url: '1.png', position: [0,cubeSize,0], rotation: [Math.PI/2,0,Math.PI] },{ url: '6.png', position: [0,-cubeSize,0], rotation: [-Math.PI/2,0,Math.PI] },{ url: '3.png', position: [0,0,cubeSize], rotation: [0,Math.PI,0] },{ url: '4.png', position: [0,0,-cubeSize], rotation: [0,0,0] }];
el = document.createElement('div');el.style.width = cubeSize * 2 + 'px';el.style.height = cubeSize * 2 + 'px';dice = new THREE.CSS3DObject(el);
for (var i = 0; i < boxInfo.length; i++) { info = boxInfo[i]; img = document.createElement('img'); img.width = cubeSize * 2; img.src = info.url; face = new THREE.CSS3DObject(img); face.position.fromArray(info.position); face.rotation.fromArray(info.rotation); dice.add(face);}
13年12月12日木曜日
![Page 29: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/29.jpg)
var boxInfo, el, dice, info, img, face;boxInfo = [{ url: '2.png', position: [-cubeSize,0,0], rotation: [0,Math.PI/2,0] },{ url: '5.png', position: [cubeSize,0,0], rotation: [0,-Math.PI/2,0] },{ url: '1.png', position: [0,cubeSize,0], rotation: [Math.PI/2,0,Math.PI] },{ url: '6.png', position: [0,-cubeSize,0], rotation: [-Math.PI/2,0,Math.PI] },{ url: '3.png', position: [0,0,cubeSize], rotation: [0,Math.PI,0] },{ url: '4.png', position: [0,0,-cubeSize], rotation: [0,0,0] }];
el = document.createElement('div');el.style.width = cubeSize * 2 + 'px';el.style.height = cubeSize * 2 + 'px';dice = new THREE.CSS3DObject(el);
for (var i = 0; i < boxInfo.length; i++) { info = boxInfo[i]; img = document.createElement('img'); img.width = cubeSize * 2; img.src = info.url; face = new THREE.CSS3DObject(img); face.position.fromArray(info.position); face.rotation.fromArray(info.rotation); dice.add(face);}
13年12月12日木曜日
![Page 30: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/30.jpg)
時間を進める
13年12月12日木曜日
![Page 31: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/31.jpg)
function updatePhysics() { //Step to a next time. world.step(timeStep);
//Copy a position of rigid body to a mesh. if (diceRigid) { diceRigid.position.copy(dice.position); diceRigid.quaternion.copy(dice.quaternion); diceRigid.position.copy(camera.position); camera.position.y += 50; camera.position.x += 100; camera.lookAt(diceRigid.position.copy(new THREE.Vector3(0, 0, 0))); }}
13年12月12日木曜日
![Page 32: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/32.jpg)
もう一回見てみます13年12月12日木曜日
![Page 33: 物理エンジンを使って 3Dに息を吹き込む](https://reader035.vdocuments.net/reader035/viewer/2022062419/5599b3641a28abd30b8b4656/html5/thumbnails/33.jpg)
ご清聴ありがとうございました
13年12月12日木曜日