4

プロジェクトで奇妙な視覚効果が発生しています (呼び出し方がわかりません)。立方体を作って回転できるようにしました。以下に、キューブを作成するコードを示します。

画像もご覧ください。アップスケールするsegmentsWidthとsegmentsHeight、側面は見栄えが良くなりますが、前面の線はまっすぐではありません. 画像は以下のコードで作成しています。私が見たいのは、フロントストレートとサイドウェイのラインに V が入っていないことです。

私が持っている場合overdraw = false、私は望んでいない白い線が表示されますが、乱雑な写真はありません. しかし、これを true に設定すると、画像が乱雑になります。

これは可能ですか？

ドアの例

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.y = 150;
    camera.position.z = 250;

    scene = new THREE.Scene();

    // Cube

    var geometry = new THREE.CubeGeometry( 100, 200, 8, 1, 1 );

    cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial([
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({ color: 0xefefef }),
        new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('img/door.jpg'),
            overdraw: false
        }),
        new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('img/door.jpg'),
            overdraw: false
        })
    ]));
    cube.position.y = 150;
    scene.add( cube );
4

1 に答える 1

7

これは、 のよく知られた問題CanvasRendererです。

この問題の優れた説明は、この投稿の後半にあります。

最善の解決策は、ジオメトリのテッセレーションを増やすことです。

var geometry = new THREE.BoxGeometry( 100, 200, 8, 2, 2, 2 );

PS このコンストラクターには 5 つではなく 6 つの引数があることに注意してください。

編集: three.js r.67 用に更新

于 2013-05-23T17:27:51.570 に答える