物理エンジンを使って 3Dに息を吹き込む
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

物理エンジンを使って 3Dに息を吹き込む

on

  • 1,477 views

Three.js勉強会 vol.1で発表した資料です。

Three.js勉強会 vol.1で発表した資料です。

Statistics

Views

Total Views
1,477
Views on SlideShare
1,467
Embed Views
10

Actions

Likes
4
Downloads
1
Comments
0

1 Embed 10

https://twitter.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

物理エンジンを使って 3Dに息を吹き込む Presentation Transcript

  • 1. 物理エンジンを使って 3Dに息を吹き込む 13年12月12日木曜日
  • 2. 自己紹介 • 面白法人カヤック HTMLファイ部所属 比留間 和也 • 最近は3D/JS/Unityばかりで、 あんまりHTML書いてません; 13年12月12日木曜日
  • 3. JavaScriptの 新しい教科書 本を書きました 13年12月12日木曜日
  • 4. 最近作ったもの 13年12月12日木曜日
  • 5. Agenda • 作ったもの紹介 • 物理エンジンの仕組み(超簡易) • CANNON.jsで物理演算 • Three.jsのCSS3DRendererで3D 13年12月12日木曜日
  • 6. CSSでレンダリングされた ほんとに投げれるサイコロ 13年12月12日木曜日
  • 7. http://hookmark.in/ 13年12月12日木曜日
  • 8. 物理エンジンの仕組み 1. 剛体に外力(重力など)を働かせる 2. ブロードフェーズ(剛体同士の大まかな衝突検出) 3. ナローフェーズ(剛体同士の詳細な衝突検出) 4. 衝突応答 5. 剛体の更新 6. 1に戻る 13年12月12日木曜日
  • 9. 剛体に外力を働かせる 13年12月12日木曜日
  • 10. ブロードフェーズ 13年12月12日木曜日
  • 11. ブロードフェーズ 13年12月12日木曜日
  • 12. ナローフェーズ 13年12月12日木曜日
  • 13. 衝突応答 13年12月12日木曜日
  • 14. 衝突応答 13年12月12日木曜日
  • 15. 剛体の更新 13年12月12日木曜日
  • 16. CANNON.jsで 物理演算 13年12月12日木曜日
  • 17. 世界を作る 13年12月12日木曜日
  • 18. //Create a CANNON world. world = new CANNON.World(); //Set gravity. world.gravity.set(0, -98.2, 0); //Set a way of broad phase world.broadphase = new CANNON.NaiveBroadphase(); 13年12月12日木曜日
  • 19. 剛体を作る 13年12月12日木曜日
  • 20. //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日木曜日
  • 21. //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日木曜日
  • 22. Three.jsの CSS3DRendererで3D 13年12月12日木曜日
  • 23. 地面を作る 13年12月12日木曜日
  • 24. //Create a ground with CSS3DObject var 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日木曜日
  • 25. //Create a ground with CSS3DObject var 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日木曜日
  • 26. サイコロを作る 13年12月12日木曜日
  • 27. 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日木曜日
  • 28. 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日木曜日
  • 29. 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日木曜日
  • 30. 時間を進める 13年12月12日木曜日
  • 31. 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日木曜日
  • 32. もう一回見てみます 13年12月12日木曜日
  • 33. ご清聴ありがとうご ざいました 13年12月12日木曜日