今天郭先生繼續說cannon.js，主演內容就是點對點約束和2D座標轉3D座標。仍然以一個案例為例，場景由一個地面、若干網格組成的約束體和一些擁有初速度的球體組成，如下圖。線案例請點選部落格原文。
下面來說說如何使用約束來完成一個這樣的物理場景。
1. 建立three場景
這一步是基礎工作，對於有一定three基礎的同學都不會陌生，我就直接上程式碼了。
initThree() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.x = 40; camera.position.y = 52; camera.position.z = 78; scene.add( camera ); scene.add(new THREE.AxesHelper(40)); scene.add(new THREE.AmbientLight(0x888888)); const light = new THREE.DirectionalLight(0xbbbbbb, 1); light.position.set(0, 50, 50); const distance = 200; let texture = new THREE.TextureLoader().load('/static/images/base/ground.png'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.copy(new THREE.Vector2(40, 40)); let groundGeom = new THREE.BoxBufferGeometry(100, 0.2, 100); let groundMate = new THREE.MeshPhongMaterial({color: 0xdddddd, map: texture}) ground = new THREE.Mesh(groundGeom, groundMate); ground.position.y = -0.1; ground.receiveShadow = true; scene.add(ground); geometry = new THREE.BoxGeometry( 2, 2, 2 ); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.setClearColor(0xbfd1e5); controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 10, 0); camera.lookAt(0,10,0); this.$refs.box.appendChild( renderer.domElement ); stats = new Stats(); this.$refs.box.appendChild(stats.dom); },
這裡面主要進行初始化場景、相機、渲染器、燈光和地面等操作。
2. 初始化物理世界
這裡麵包括建立CANNON.World，建立地面剛體，每塊需要被約束的剛體和設定點對點約束（在給定的偏移點連線兩個實體），接下來我們仍以程式碼註釋的形式詳細的講解對於物理世界的建立。
initCannon() { world = new CANNON.World(); world.gravity.set(0, -9.8, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; bodyGround = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(0, -0.1, 0), shape: new CANNON.Box(new CANNON.Vec3(50, 0.1, 50)), material: new CANNON.Material({friction: 0.05, restitution: params.restitution}) }); ground.userData = bodyGround; world.addBody(bodyGround); //上面的程式碼意義上一節已經講過了，我就不多言，主要看下面的程式碼。 //這裡設定了一些變數，N表示組成約束體剛體的數量，space表示相鄰兩個剛體直接的距離間隔，mass為剛體的質量變數，width表示剛體半寬度，height表示剛體半高度，last表示上一個相連的剛體。 var N = 20, space = 0.1, mass = 0, width = 10, hHeight = 1, last; var halfVec = new CANNON.Vec3(width, hHeight, 0.2);//剛體的長寬高的halfSize向量 var boxShape = new CANNON.Box(halfVec);//定義一個長方體資料 var boxGeometry = new THREE.BoxBufferGeometry(halfVec.x * 2, halfVec.y * 2, halfVec.z * 2);//定義一個長方几何體 var boxMaterial = new THREE.MeshLambertMaterial( { color: 0xffaa00 } );//定義幾何體材質 for(var i=0; i<N; i++) {//遍歷N次，從上到下建立長方體網格和剛體，位置逐漸變低，質量逐漸變小。 var boxBody = new CANNON.Body({mass: mass, material: new CANNON.Material({friction: 0.05, restitution: params.restitution})});//建立剛體，第一個剛體的質量設定成0（即為不動的剛體），定義材質，並設定摩擦係數和彈性係數 boxBody.addShape(boxShape);//為剛體新增形狀 var boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);//建立three世界的網格 boxBody.position.set(0, (N - i + 5) * (hHeight * 2 + space * 2), 0);//這裡設定剛體的位置，是由上倒下的順序 boxBody.linearDamping = 0.01;//設定線性阻尼 boxBody.angularDamping = 0.01;//設定旋轉阻尼 world.addBody(boxBody);//將剛體新增到物理世界中 scene.add(boxMesh);//將網格新增到three場景中 boxes.push(boxBody);//將剛體新增到陣列中 boxMeshes.push(boxMesh);//將網格新增到陣列中，這兩步可以在更新物理世界中找到他們的對應關係，也可以新增到Mesh的userData屬性中去，具體可以參見上一篇文章 if(i == 0) { //當i=0時，也就是第一個剛體，在剛體建立完畢後，我們將mass變數設定成1 mass = 1; } else {//從第二個剛體往後都會建立兩個點對點的約束，點對點約束我們下面講 var ptp1 = new CANNON.PointToPointConstraint(boxBody, new CANNON.Vec3(-width, hHeight + space, 0), last, new CANNON.Vec3(-width, -hHeight - space, 0), (N - i) / 4); var ptp2 = new CANNON.PointToPointConstraint(boxBody, new CANNON.Vec3(width, hHeight + space, 0), last, new CANNON.Vec3(width, -hHeight - space, 0), (N - i) / 4); world.addConstraint(ptp1);//將約束新增到物理世界 world.addConstraint(ptp2);//將約束新增到物理世界 } last = boxBody;//這裡將本次建立的剛體賦值給last變數，一遍下一個迴圈使用 } },
我們來說說這個點對點約束，他時由5個引數組成
PointToPointConstraint （ bodyA pivotA bodyB pivotB maxForce ）
- bodyA – 剛體A
- pivotA – 相對於剛體A質心的點，剛體A被約束到該點。
- bodyB – 將被約束到與剛體A相同的點的主體。因此，我們將獲得剛體A和剛體B之間的連結。如果未指定，剛體A將被約束到一個靜態點。
- pivotB – 相對於剛體B質心的點，剛體B被約束到該點。
- maxForce – 約束物體應施加的最大力（如果施加的力過大，剛體A和剛體B之間的連結就會被拉長）
下面就是我們設定連結點的示意圖，這樣我們就可以清楚上面的程式碼了
3. 根據滑鼠點選，發射一個剛體球
這裡就要應用到2D座標轉3D座標的一些知識了，這裡網上已經有很多相關的知識了，可以看threejs 世界座標與螢幕座標相互轉換，這裡我就直接上程式碼了
document.addEventListener('click', event => { //點選滑鼠
event.preventDefault();//阻止預設事件
let x = (event.clientX / window.innerWidth) * 2 - 1;//將滑鼠點選的x值轉換成[-1, 1]
let y = - (event.clientY / window.innerHeight) * 2 + 1;//將滑鼠點選的y值轉換成[-1, 1]
let p = new THREE.Vector3(x, y, -1).unproject(camera);//通過unproject方法，使用所傳入的攝像機來反投影（projects）該向量，得到滑鼠對應三維空間點
let v = p.sub(camera.position).normalize();//用滑鼠對應的三維空間點減去相機的位置向量，然後歸一化得到小球的射出方向的單位向量
this.createSphere(v, camera.position);//把需要的兩個向量傳入建立小球的方法中
})
createSphere(v, c) {
//建立小球的方法和上一篇很相似，我就不贅述了
const speed = 50;
var geometry = new THREE.SphereBufferGeometry(1.5, 32, 16);
let sphere = new THREE.Mesh( geometry, this.createRandomMaterial());
sphere.position.copy(c);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add( sphere );
ballMeshes.push(sphere);
let sphereBody = new CANNON.Body({
mass: params.mass,
position: new CANNON.Vec3(c.x, c.y, c.z),
shape: new CANNON.Sphere(1.5),
material: new CANNON.Material({friction: 0.1, restitution: params.restitution})
});
sphereBody.collisionResponse = 0.01;
sphereBody.velocity.set(v.x * speed, v.y * speed, v.z * speed);//這裡要注意velocity屬性可以剛體帶有出速度
world.addBody(sphereBody);
balls.push(sphereBody)
setTimeout(() => {
scene.remove(sphere);
sphere.material.dispose();
sphere.geometry.dispose();
world.removeBody(sphereBody);
balls.shift();
ballMeshes.shift();
}, 60000)
}
createRandomMaterial() {
color.setHSL(Math.random(), 1.0, 0.5);
return new THREE.MeshPhongMaterial({color: color});
}
這樣就完成了點對點約束的物理效果，讓原本虛擬的three世界變得更加真實。
轉載請註明地址：郭先生的部落格