threejs物體設置中心坐標
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>移動位置</title> <style> body { margin: 0; overflow: hidden; } </style> <script src="js/three2.js"></script> <script src="js/OrbitControls2.js"></script> </head> <body> <script> //創建一個renderer , var renderer = new THREE.WebGLRenderer({ antialias: true //抗鋸齒 }); //設置清空顏色，每秒會渲染60次，渲染的時候會使用此顏色先清空 //renderer.setClearColor(new THREE.Color(0x000000, 1)); renderer.setClearColor("#000000"); // 設置渲染器背景為黑色 //設置渲染尺寸 renderer.setSize(window.innerWidth, window.innerHeight); //設置陰影允許 renderer.shadowMapEnabled = true; //將webgl元素添加到body中 document.body.appendChild(renderer.domElement); //創建場景 var scene = new THREE.Scene(); //創建一個透視相機，45是相機的視角 ， 寬高比是屏幕的寬高比 ， 最近能看到0.1 ， 最遠能看到10000 var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20000 ); //將相機放到x:1000 , y:1000 , z:1000的位置 camera.position.set(0, 1000, 1000); //設置相機的朝向，可以認為與相機鏡頭垂直的軸線應該和哪一個軸相交 camera.up.set(0, 1, 0); //將相機的鏡頭對准x:0 , y:0 , z:0的位置 經過這個設置相機就被固定住了 camera.lookAt({ x: 0, y: 0, z: 0 }); //將相機添加到場景中 scene.add(camera); /*var lights = new Array(); lights[0] = new THREE.PointLight(0xffffff, 1, 0); lights[1] = new THREE.PointLight(0xffffff, 1, 0); lights[2] = new THREE.PointLight(0xffffff, 1, 0); lights[0].position.set(0, 200, 0); lights[1].position.set(100, 200, 100); lights[2].position.set(-100, -200, -100); scene.add(lights[0]); scene.add(lights[1]); scene.add(lights[2]); */ var light = new THREE.PointLight(0xffffff, 1, 100); //創建光源 light.position.set(20, 200, 0); //設置光源的位置 scene.add(light); //在場景中添加光源 var meshPolygon = createPolygon(); scene.add(meshPolygon); var meshPolygon2 = createPolygon2(); scene.add(meshPolygon2); var orbitCtl = new THREE.OrbitControls(camera); orbitCtl.autoRotate = false; var clock = new THREE.Clock(); function threeStart() { var delta = clock.getDelta(); orbitCtl.update(delta); renderer.clear(); renderer.render(scene, camera); requestAnimationFrame(threeStart); } threeStart(); function createPolygon(){ var group = new THREE.Group(); var geometry2 = new THREE.BoxGeometry(500, 500, 4000); var material2 = new THREE.MeshBasicMaterial( { color: "yellow", side: THREE.DoubleSide } ); var mesh2 = new THREE.Mesh( geometry2, material2 ) ; group.add(mesh2); return group; } function createPolygon2(){ var group = new THREE.Group(); var geometry2 = new THREE.BoxGeometry(500, 500, 4000); var material2 = new THREE.MeshBasicMaterial( { color: "yellow", side: THREE.DoubleSide } ); var mesh2 = new THREE.Mesh( geometry2, material2 ) ; mesh2.position.set(600,0,0); group.add(mesh2); return group; } </script> </body> </html>
#################################