threejs场景的初始渲染不会添加纹理

我原本为我的three.js场景添加了一个动画函数，该场景是在AngularJS模型中加载的，但发现在关闭模态之后，动画继续进行，是不需要的，因为我不需要像电子游戏那样的不断的动画。threejs场景的初始渲染不会添加纹理

在这一点上，我将它切换到只有在有人使用OrbitControls移动我的示例中的简单框时渲染，并且有一个初始调用来呈现场景，以便用户可以看到该框而不是大黑广场。

但是，在初始渲染时，直到我使用轨道控件并移动框时，纹理才会出现，直到它出现。这很奇怪，因为我的初始调用和绑定到OrbitControls的监听器都是相同的函数。我如何获得初始加载以显示纹理？

$scope.generate3D = function() { 
    // 3D OBJECT - Variables 
    var texture0 = baseBlobURL + 'Texture_0.png'; 
    var boxDAE = baseBlobURL + 'Box.dae'; 
    var scene; 
    var camera; 
    var renderer; 
    var box; 
    var controls; 
    var newtexture; 

    // Update texture 
    newtexture = THREE.ImageUtils.loadTexture(texture0); 

    //Instantiate a Collada loader 
    var loader = new THREE.ColladaLoader(); 

    loader.options.convertUpAxis = true; 
    loader.load(boxDAE, function (collada) { 

     box = collada.scene; 

     box.traverse(function (child) { 

      if (child instanceof THREE.SkinnedMesh) { 

       var animation = new THREE.Animation(child, child.geometry.animation); 
       animation.play(); 

      } 
     }); 

     box.scale.x = box.scale.y = box.scale.z = .2; 
     box.updateMatrix(); 

     init(); 

     // Initial call to render scene, from this point, Orbit Controls render the scene per the event listener 
     render(); 

    }); 

    function init() { 
     scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
     renderer = new THREE.WebGLRenderer(); 

     renderer.setClearColor(0xdddddd); 
     //renderer.setSize(window.innerWidth, window.innerHeight); 
     renderer.setSize(500, 500); 

     // Load the box file 
     scene.add(box); 

     // Lighting 
     var light = new THREE.AmbientLight(); 
     scene.add(light); 

     // Camera 
     camera.position.x = 40; 
     camera.position.y = 40; 
     camera.position.z = 40; 

     camera.lookAt(scene.position); 

     // Rotation Controls 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 

     controls.addEventListener('change', render); 

     controls.rotateSpeed = 5.0; 
     controls.zoomSpeed = 5; 

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

     var myEl = angular.element(document.querySelector('#webGL-container')); 
     myEl.append(renderer.domElement); 

    } 

    function render() { 
     renderer.render(scene, camera); 
     console.log('loaded'); 
    } 
}

来源

2015-10-01 Kode

您正在使用ColladaLoader和你想要的模型，所有的纹理被加载时，将呼叫强制render()。

如果在加载程序回调中将模型添加到场景中，即使模型已加载，纹理可能也没有。

一两件事你可以做的就是实例化的装载机之前添加以下内容：

THREE.DefaultLoadingManager.onLoad = function() { 

    // console.log('everything loaded'); // debug 

    render(); 

};

或者，

THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) { 

    // console.log(item, loaded, total); // debug 

    if (loaded === total) render(); 

};

three.js所r.72

来源

2015-10-01 15:31:47 WestLangley

这做了，而且品牌感。感谢您添加调试线。 – Kode

还有onLoad回调函数在加载时执行= total：'''THREE.DefaultLoadingManager.onLoad = function（）{renderer.render（scene，camera）; };''' –

@FalkThiele更新回答。感谢您的建议。 – WestLangley

threejs场景的初始渲染不会添加纹理

回答

相关问题