Three.js實現多個物體以中心位置各自向周圍移動
阿新 • • 發佈：2019-01-26
本人原本是做Unity3D開發的，由於工作原因學習了一下Three.js，花了點時間寫了一個小功能。寫慣了C#，有點不適應js的寫法，寫的不好的地方，希望有人能指正。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>物體以中心點朝著四方八方移動</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 centerPosition; 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 cube1 = new THREE.Mesh(geometry,material); var cube2 = cube1.clone(); //物體克隆 var cube3 = cube1.clone(); var cube4 = cube1.clone(); cube1.position.x = 5; cube2.position.y = 5; cube3.position.z = 5; cube3.position.x = 5; cube4.position.x = 4; cube4.position.y = 4; cube4.position.z = 4; scene.add(cube1); scene.add(cube2); scene.add(cube3); scene.add(cube4); camera.position.z = 50; centerPosition = SetCenterPosition(); //計算每個物體移動的方向，物體位置減去中心位置 var direction1 = cube1.position.sub(centerPosition); var direction2 = cube2.position.sub(centerPosition); var direction3 = cube3.position.sub(centerPosition); var direction4 = cube4.position.sub(centerPosition); var cubeCenter = cube1.clone(); cubeCenter.position.set(centerPosition.x,centerPosition.y,centerPosition.z); console.log("cubeCenter:"+cubeCenter.position.x); scene.add(cubeCenter); var animate = function() { requestAnimationFrame(animate); BaoZhaUpdate(cube1,direction1); BaoZhaUpdate(cube2,direction2); BaoZhaUpdate(cube3,direction3); BaoZhaUpdate(cube4,direction4); renderer.render(scene,camera); }; animate(); //設定中心點 function SetCenterPosition() { var pos=new THREE.Vector3(0,0,0); //四個物體位置相加 pos.add(cube1.position); pos.add(cube2.position); pos.add(cube3.position); pos.add(cube4.position); var count = 4; pos = pos.divideScalar(count); //得出平均位置 console.log("pos:"+pos.x); return pos; } function BaoZhaUpdate(cube,direction) { //console.log("direction:"+direction.x); //設定物體移動 cube.position.set(cube.position.x+direction.x*0.01,cube.position.y+direction.y*0.01,cube.position.z+direction.z*0.01); } </script> </body> </html>