threejs物体设置中心坐标

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>

#################################

QQ 3087438119
原文地址:https://www.cnblogs.com/herd/p/15782261.html