Question

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

我一直在四处寻找并尝试了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修改摄像机位置/方向时渲染场景。

因此，你可以使用这种模式 - 没有动画循环：

controls.addEventListener( 'change', render );

但是，您还需要在纹理加载时强制渲染。您可以通过在render方法中指定ImageUtils.loadTexture()的回调来执行此操作：

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

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

three.js r.70

仅在画布上应用纹理单击Three.js

1 个答案: