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>

しかし、うまくいきません。testoutput "hi" は 1 回だけ表示されます。マウスを使用すると、かなり頻繁に表示されるはずです。私が達成しようとしたのは、controls.addEventListener('change',test,false); です。マウスの変化 (位置、キーダウンなど) を確認し、新しいレンダーフレームを呼び出します。例（Example）では、私がやりたいことを何らかの形で行います。

ここで何が間違っていますか？マウスドラッグでカメラを回転できるようにしたいだけです。はい、私はこれに全く慣れていません。2時間だけ読んでください。

前もって感謝します。

4

0 に答える 0