Three.js Collada modèle affiché noir sans lumières jusqu'à un mouvement de la souris

Question

J'ai rencontré un problème étrange avec l'affichage du modèle collada dans trois.js Je soupçonne que quelque chose ne va pas avec la logique du script, mais je ne peux pas comprendre en dehors. Le problème est que le modèle Collada est affiché en noir jusqu'à ce qu'un utilisateur déplace une souris (contrôle de l'orbite). Seulement après cela, le modèle s'allume. Ainsi, au début, lorsque la page se charge, le modèle est noir et ceci est source de confusion pour un utilisateur. Quel est le problème avec le code? Où pourrait être l'erreur?

Le code du script est le suivant:

<script> 

     if (! Detector.webgl) Detector.addGetWebGLMessage(); 

     var container, stats; 
     var camera, controls, scene, renderer; 
     var pointLight; 

     init(); 
     render(); 


     function animate() 
     { 
      pointLight.position.copy(camera.position); 
      requestAnimationFrame(animate); 
      controls.update(); 
     } 

     function init() { 
      camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 10000); 
      camera.position.set(-40, 70, 70); 


      controls = new THREE.OrbitControls(camera); 
      controls.damping = 0.2; 
      controls.addEventListener('change', render); 

      scene = new THREE.Scene(); 



      // world 

      var mesh; 
      var loader = new THREE.ColladaLoader(); 
      loader.load('./models/collada/test.dae', function (result) { 
       mesh = result.scene; 
       mesh.scale.set(0.3, 0.3, 0.3); 
       scene.add(mesh); 
       render(); 
       }); 



      // lights 

      var hemLight = new THREE.HemisphereLight(0x000000, 0x303030, 0.8); 
      scene.add(hemLight); 

      pointLight = new THREE.PointLight(0xffffff, 1.1); 
      pointLight.position.copy(camera.position); 
      scene.add(pointLight); 


      // renderer 

      renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); 
      renderer.setClearColor(0xEEEEEE, 1); 
      renderer.shadowMapType = THREE.PCFSoftShadowMap; 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 

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


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

      animate(); 

     } 

     function onWindowResize() 
     { 
      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      render(); 

     } 

     function render() 
     { 
      renderer.render(scene, camera); 
     } 


    </script> 

Answer 1

Vous n'êtes pas appeler render() de votre fonction Animate(), de sorte que la scène est seulement rendue par l'événement OrbitControls onChange. Ajoutez render() à la fin de animate() et cela fonctionnera. Vous pouvez également supprimer le rappel onChange, car vous serez rendu régulièrement.