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>
#################################