Question

我正在尝试学习三项，到目前为止事情进展顺利。我正在努力创建一个在高尔夫球座上打造高尔夫球的简单项目。最终我会将它放在天空盒中并使用一些着色器来创建球中凹坑的外观。

现在我已经能够创建球和球座并设置相机和灯光。我现在正在尝试添加一些轨道控制，以便我可以在场景中旋转，平移和缩放。我添加了orbitControls脚本并将其设置为我在网上示例中看到的内容。然而，当我试图绕轨道运行时，我的相机会捕捉到1,0,0 0,1,0或0,0,1，最终场景完全失败，我最终看向0,0没有任何物体可见。

这是我的代码全部

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>3D Sandbox</title>
        <style>
            html, body {
                margin: 0px;
            }
            canvas {
                background-color: #999;
                position: absolute;
                height: 100vh;
                width: 100vw;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src='/three.js'></script>
        <script src="/orbitControls.js"></script>
        <script type='text/javascript'>
            let scene, 
                camera, 
                controls,
                renderer,
                height = window.innerHeight,
                width = window.innerWidth;

            window.addEventListener('load', init, false);

            function init () {
                createScene();
                createCamera();
                createLights();
                createBall();
                createTee();
                render();
                animate();
            }

            function createScene () {
                let grid;

                scene = new THREE.Scene();

                renderer = new THREE.WebGLRenderer({ 
                    antialias: true,
                    alpha: true
                });
                renderer.setSize(width, height);
                document.body.appendChild(renderer.domElement);

                grid = new THREE.GridHelper(100, 5);
                scene.add(grid);
            }

            function createCamera () {
                camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
                camera.position.z = 50;
                camera.position.y = 13;
                camera.up = new THREE.Vector3(0,1,0);
                //camera.lookAt(new THREE.Vector3(0,13,0));

                controls = new THREE.OrbitControls(camera);
                controls.target = new THREE.Vector3(0, 13, 0);
                controls.addEventListener('change', render);
            }

            function createLights () {
                let directionalLight, ambientLight;

                directionalLight = new THREE.DirectionalLight(0x404040, 4);
                directionalLight.position.set(0, 2000, 2000);
                directionalLight.target.position.set(0, 2, 0);
                scene.add(directionalLight);

                ambientLight = new THREE.AmbientLight(0x404040, 2);
                scene.add(ambientLight);
            }

            function createBall () {
                let ballGeom, ballMaterial, ball;

                ballGeom = new THREE.SphereGeometry(5, 32, 32);
                ballMaterial = new THREE.MeshPhongMaterial({
                    color: 0xFFFFFF
                });
                ball = new THREE.Mesh(ballGeom, ballMaterial);
                ball.position.y = 13.3;

                scene.add(ball);
            }

            function createTee () {
                let tee, stemGeom, stem, bevelGeom, bevel, topGeom, top, teeMat;

                tee = new THREE.Object3D();
                teeMat = new THREE.MeshPhongMaterial({
                    color: 0x0000FF
                });

                stemGeom = new THREE.CylinderGeometry(.9, 0.75, 7);
                stem = new THREE.Mesh(stemGeom, teeMat);
                tee.add(stem);

                bevelGeom = new THREE.CylinderGeometry(1.5, .9, 2);
                bevel = new THREE.Mesh(bevelGeom, teeMat);
                bevel.position.y = 3.75;
                tee.add(bevel);

                topGeom = new THREE.CylinderGeometry(1.5, 1.5, .25);
                top = new THREE.Mesh(topGeom, teeMat);
                top.position.y = 4.875;
                tee.add(top);

                tee.position.y = 3.5;
                scene.add(tee);
            }

            function render () {
                renderer.render(scene, camera);
            }

            function animate() {
              requestAnimationFrame( animate );
              controls.update();
              render();
            }
        </script>
    </body>
</html>

Answer 1

controls = new THREE.OrbitControls(camera);

需要

controls = new THREE.OrbitControls(camera, renderer.domElement);

结果在this block。

Answer 2

就我而言，相机 position 与 OrbitControl target 相同，这让我的 OrbitControl 看起来“坏了”（与 OP 不同的症状——我的 OrbitControl 根本不起作用。）

如this github comment中所述，相机位置和OrbitControl目标不能相同；我重新定位了我的相机来解决这个问题 (camera.position.z = 10)。

请记住，相机（与任何 Object3D 一样）是 positioned at (0,0,0) by defualt，而 OrbitControl target 属性（Vector3D）似乎 {{3} }

THREE.js轨道控制不起作用

2 个答案: