仅在 canvas 单击 Three.js 时应用纹理

Question

我正在使用 Three.js 中的 WebGLRenderer 渲染从具有纹理的 IndexedFaceStructure 重建的对象。我的问题是，当页面加载对象时，显示的对象没有纹理，只显示黑色网格，但是，当我单击渲染对象的 canvas 时，纹理显示出来。

我一直在四处寻找并尝试了 texture.needsUpdate = true;技巧，但是这个也删除了页面加载时的黑色网格对象，所以我在这里不知所措。

这些是我的代码的主要部分：

function webGLStart() {

            container = document.getElementById("webgl-canvas");
            renderer = new THREE.WebGLRenderer({canvas:container, alpha:true,  antialias: true});
            renderer.setClearColor(0x696969,1);
            renderer.setSize(container.width, container.height) ;
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(45, container.width / container.height, 1, 100000);
            camera.position.set(60, 120,2000) ;

            //computing the geometry2 

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );
            texture = new THREE.ImageUtils.loadTexture(texFile);
            //texture.needsUpdate = true;
            material = new THREE.MeshBasicMaterial( {wireframe:false, map: texture, vertexColors: THREE.VertexColors} );
            mesh = new THREE.Mesh(geometry2, material);

            scene.add(mesh);

            render();
            animate();

    } 

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

    function animate()
    {
        controls.update();
    }

和 html 部分：canvas id="webgl-canvas" style="border: none;" width="900" height="900" （我无法正确添加). 你知道为什么会这样吗？

Answer 1

如果是静态场景，不需要动画循环，只需要在OrbitControls修改相机position/orientation.

时渲染场景

因此，您可以使用此模式——无需动画循环：

controls.addEventListener( 'change', render );

但是，您还需要在加载纹理时强制进行渲染。您可以通过在 ImageUtils.loadTexture() 方法中指定对 render 的回调来做到这一点：

var texture = THREE.ImageUtils.loadTexture( "textureFile", undefined, render );

或者，您可以将网格添加到场景并在回调中调用渲染。

three.js r.70

仅在 canvas 单击 Three.js 时应用纹理

Texture applied only on canvas click with Three.js

three.js