3つのJSアニメーションの画面のブランク

Question

私は3つのjsとwebglに新しいです。私はビルドしている複雑なソーラーシステムを持っています。ここに問題を表示するために非常に剥奪されたバージョンがあります（低解像度で太陽がある）。 sun.rotate.y + = 1という行を追加すると、それはまったく何もロードまたは実行しません。私はたくさんの周りを見て、理由を把握することはできません。私はそれが私が行方不明の何かばかだと確信しています。助けてくれてありがとう。

<script> 

    // SETUP SCENE 

    var camera, controls, scene, renderer; 
    var container 

    init(); 
    animate(); 

    function init() { 

     camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 90000); 
     camera.position.z = 100; 

     controls = new THREE.TrackballControls(camera); 

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

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

     controls.staticMoving = false; 
     controls.dynamicDampingFactor = 0.3; 

     controls.keys = [ 65, 83, 68 ]; 

     controls.addEventListener('change', render); 


     scene = new THREE.Scene(); 


     // ADD THE SUN PHYSICAL LOCATION 
     var geometry = new THREE.SphereGeometry(5, 3, 3, 0, Math.PI * 2, 0, Math.PI * 2); 
     var material = new THREE.MeshBasicMaterial({color: "Yellow"}); 
     var sun = new THREE.Mesh(geometry, material); 
     scene.add(sun); 

     //RENDER 
     renderer = new THREE.WebGLRenderer({ antialias: false }); 
     renderer.setPixelRatio(window.devicePixelRatio); 
     renderer.setSize(window.innerWidth, window.innerHeight); 

     container = document.getElementById('container'); 
     container.appendChild(renderer.domElement); 

     window.addEventListener('resize', onWindowResize, false); 

     render(); 
     animate(); 


    } 

    function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

      controls.handleResize(); 

      render(); 

    } 

    function animate() { 

      requestAnimationFrame(animate); 

      controls.update(); 

      render();  
    } 


    function render() { 
      sun.rotate.y +=1; // Problem animating? 
      renderer.render(scene, camera); 
    } 

</script> 

Answer 1

現在、それはrender()スコープに表示されていないので、あなたはグローバル変数としてsun定義する必要があります。

はまた、私はそれがsun.rotateY(0.01)

編集ですので、あなたは「回転X（）、回転Y（）または回転Zを（）」と呼んでメッシュを回転させるように思う：私はあなたがそのrotationを変更するのではなくによりメッシュを回転させることができます実現しましたそのrotateプロパティです。

Answer 2

あなたはスコープの問題を持っている（まあ、それはあなたがES6やES5を使用しているものに応じて複雑だ）、これらは問題のビットです：

はあなたのグローバルグローバル空間に（またはしないのJsはそれを追加します）宣言します。

var container, sun; 

そして、init関数内でそれを参照してください。

this.sun = new THREE.Mesh(geometry, material); 

ワーキングペン：

Scope Issue in Three.js

また、TrackballControlsはThree.jsの一部ではないため、インポートする必要があります。ペンを確認してください。

また、また、回転のためにあなたが使用することをお勧めします：

sun.rotation.y += 0.003;