三个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动画屏幕空白

回答

相关问题