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場景的初始渲染不會添加紋理

回答

相關問題