Question

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

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

现在我希望能够用鼠标旋转整个场景，用Google搜索并找到this link。在示例中正常工作，我试图复制该示例。当前代码如下所示：

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

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

我在这里做错了什么？我只是希望能够使用mousedragging旋转相机。是的，我对此完全陌生。现在阅读它2个小时。

提前致谢。

Three.js鼠标动作

0 个答案: