Three.js 立方体，每个面上都有不同的纹理。如何隐藏边/顶点答案

【问题标题】：Three.js Cube with different texture on each face. How to hide edges / verticesThree.js 立方体，每个面上都有不同的纹理。如何隐藏边/顶点
【发布时间】：2012-08-11 06:36:17
【问题描述】：

我正在尝试在 Three.js 中创建一个立方体，在立方体的每个面上使用不同的图像作为纹理。

如何隐藏网格的边/顶点？

代码：

var container, camera, scene, renderer, cube;

init();
animate();

function init(){
    container = document.getElementById('container');
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;
    scene.add( camera );

    var materials = [];
    for ( var i = 0; i < 6; i ++ ) {
        materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.png') } ) );
    }

    cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 5,5,5, materials ), new THREE.MeshFaceMaterial() );
    cube.position.y = 150;
    scene.add( cube );
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight);
    container.appendChild( renderer.domElement );
    }

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render(){
    cube.rotation.y += 0.005;
    renderer.render( scene, camera );
}

【问题讨论】：

这段代码似乎不会显示边缘......您需要在某处设置一个线框：真标志才能看到它们。您能否在某处发布您的代码的实时示例，以便我们了解您在说什么？
我想在 jsfiddle 上发布一个示例，但它不起作用。
当我在 for 循环中使用 overdraw: true 时，它不再显示边缘。当我不按照 EliSherer 的建议细分网格时，立方体的面会以一种奇怪的方式移动。见github.com/mrdoob/three.js/issues/659

标签： javascript three.js

【解决方案1】：

改变：

for ( var i = 0; i < 6; i ++ ) {
    materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.jpg') } ) );
}

到：

for ( var i = 0; i < 6; i ++ ) {
    materials.push( new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'img/' + i + '.jpg'), overdraw: true } ) );
}

【讨论】：

【解决方案2】：

换行：

cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 5,5,5, materials ), new THREE.MeshFaceMaterial() );

到：

cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1,1,1, materials ), new THREE.MeshFaceMaterial() );

【讨论】：

【解决方案3】：

尝试使用其他渲染器。更改此行：

 renderer = new THREE.CanvasRenderer();

到这个：

 renderer = new THREE.WebGLRenderer();

【讨论】：