三個JS動畫屏幕空白

我是三個js和webgl的新手。我有一個複雜的太陽系我正在建設，這一切都很好，直到我想動畫什麼。這是一個非常簡潔的版本來顯示問題（太陽在低分辨率）。如果我添加行sun.rotate.y + = 1;它不會加載或運行任何東西。我環顧四周，無法弄清原因。我相信這是我失蹤的愚蠢。謝謝你的幫助。三個JS動畫屏幕空白

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

來源

2016-10-31 rankind

您需要定義sun作爲一個全局變量，因爲它是目前不在render()範圍可見。

另外，我覺得旋轉你叫「rotateX（），旋轉Y（）或rotateZ（）」，所以它是sun.rotateY(0.01)

編輯網格：我意識到，你可以通過修改其rotation，而不是旋轉網格其rotate屬性。

聲明全局（或JS就不將其添加）全球空間：

來源

2016-10-31 02:53:12

小糊塗。太陽呈現良好而不是全球變量。我可以渲染並與相機進行交互以平移它等。當我嘗試添加旋轉動畫時，它只會停止工作？ – rankind

您是否嘗試使用「旋轉」而不是「旋轉」？另外，你使用的是什麼版本的three.js？ –

是的，我更新了使用sun.rotation.y + = 1;我在三個js的最新版本。剛剛下載它昨天。我還在任何函數之前聲明瞭可變的太陽。仍然沒有去.... – rankind

你有一個範圍的問題，這些都是違規位（當然這取決於你使用ES6什麼，或者ES5很複雜）：

var container, sun;

，並參考它的初始化函數裏面：

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

工作筆：

Scope Issue in Three.js

此外，TrackballControls不是Three.js的一部分，您必須導入它，檢查筆。

另外，同樣，對於旋轉，你可能要使用：

sun.rotation.y += 0.003;

來源

2016-10-31 03:23:16 Keno

三個JS動畫屏幕空白

回答

相關問題