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

Question

我最初为我的three.js场景设置了一个动画功能,该场景加载在AngularJS模态中,但发现在关闭模态之后,动画继续运行,这是不必要的,因为我不需要像视频一样的恒定动画游戏会有.

此时,我将其切换为仅在有人使用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');
    }
}

Answer 1

您正在使用,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