0

我昨天询问了如何在浏览器中绘制 3D 对象，能够用鼠标操作它们，并确保它在每个浏览器中都能正常工作。现在我正在使用three.js，我很高兴，因为它确实有效。

我能够理解基本教程，绘制我的第一个场景并旋转第一个立方体等。

现在我希望能够用鼠标旋转整个场景，谷歌搜索并找到了这个链接。在示例中工作正常，我尝试复制示例。当前代码如下所示：

<html>
<head>
    <title>My first Three.js app</title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="three.min.js"></script>
      <script src="TrackballControls.js"></script>
    <script type="text/javascript">                      
           // Variables
           var scene, camera, controls, renderer;   
           var geometry, material, cube;            

           init();
           animate();
           render();

           function init() {
                // Scene, camera
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 500, window.innerWidth / window.innerHeight, 0.1, 1000 );

                // Mouse controls
                controls = new THREE.TrackballControls(camera);

             controls.rotateSpeed = 1.0;
             controls.zoomSpeed = 1.2;
             controls.panSpeed = 0.8;

             controls.noZoom = false;
             controls.noPan = false;

             controls.staticMoving = true;
             controls.dynamicDampingFactor = 0.3;  
             controls.keys = [ 65, 83, 68 ];   
             controls.addEventListener('change',test,false);

                // Renderer
                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                // Basic cube to show
                geometry = new THREE.CubeGeometry(10,10,10);
                material = new THREE.MeshBasicMaterial({color:0x00ff00});
                cube = new THREE.Mesh(geometry);
                scene.add(cube);

                camera.position.z = 10;
           }

           function test() {
                alert("hi");
                render();
           } 
           function animate() {
                requestAnimationFrame(render);
                controls.update();     
           }
           function render() {                
              renderer.render(scene, camera);
               //cube.rotation.x += 0.1;
               //cube.rotation.y += 0.1;
           }        
    </script>
</body>

但它不起作用。测试输出“hi”只出现一次。使用鼠标时它应该经常出现。我试图完成的是 controls.addEventListener('change',test,false); 查看鼠标是否有任何变化（位置、按键等），然后调用新的渲染帧。在示例（示例）中，它以某种方式完成了我想要它做的事情。

我在这里做错了什么？我只想能够通过鼠标拖动来旋转相机。是的，我对此完全陌生。现在只需阅读 2 小时。

提前致谢。

4

0 回答 0