Три JS Animation Screen Blank

Я новичок в трех js и webgl. У меня сложная солнечная система, которую я строю, и все это отлично работает, пока я не хочу оживить что-либо. Вот очень урезанная версия, чтобы показать проблему (с солнцем в низком разрешении). Если я добавлю строку sun.rotate.y + = 1; он не будет загружать или запускать что-либо вообще. Я много огляделся и не могу понять, почему. Я уверен, что это что-то глупое, я скучаю. Спасибо за любую помощь.Три JS Animation Screen Blank

<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(), rotateY() или rotateZ()» так sun.rotateY(0.01)

Edit: я понял, что вы можете повернуть сетку, изменяя его rotation, а не его rotate Недвижимость.

источник

2016-10-31 02:53:12

немного запутался. Солнце прекрасно выглядит, не будучи глобальной переменной. Я могу отображать и взаимодействовать с камерой, чтобы панорамировать ее. Он перестает работать, когда я пытаюсь добавить анимацию вращения? – rankind

Вы пытались использовать «поворот» вместо «поворота»? Кроме того, какую версию трёх.js вы используете? –

Да, я обновил для использования sun.rotation.y + = 1; Я на последней версии трех js. Просто скачал его вчера. Я также объявил переменное солнце перед любыми функциями. Все еще нет ... – rankind

У вас есть вопрос Scope (ну это сложно в зависимости от того, что вы используете ES6 или ES5), эти обижая биты:

Объявите ваш глобальный (или не Js добавит его) в глобальном пространстве:

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 Animation Screen Blank

ответ

Смежные вопросы