Contenu connexe Similaire à 物理エンジンを使って 3Dに息を吹き込む (8) Plus de Kazuya Hiruma (20) 物理エンジンを使って 3Dに息を吹き込む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日木曜日
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日木曜日
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日木曜日
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日木曜日
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日木曜日