3

キューブの各面のテクスチャとして異なる画像を使用して、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 );
}
4

3 に答える 3

3

変化する：

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 } ) );
}
于 2012-08-20T17:18:28.917 に答える
1

行を変更します。

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() );
于 2012-08-15T07:06:46.100 に答える
0

別のレンダラーを使用してみてください。この行を変更します。

 renderer = new THREE.CanvasRenderer();

これに：

 renderer = new THREE.WebGLRenderer();
于 2014-06-01T19:19:17.960 に答える