Three.js無法在外部模型上正確渲染紋理

Question

我正在嘗試使用Three.js創建一個非常逼真的場景。 到目前為止，我已經實現了鼠標控件，從Maya加載模型，然后開始應用紋理。 但是，該代碼有效，因為可以在紋理下面的圖像上看到它，而不是人們期望的那樣。 我認為問題是因為模型的每個面都是單獨填充的，這是在我以線框模式顯示模型時發生的。

我的UV值如下所示：

[[0.375,0,0.625,0,0.375,0.25,0.625,0.25,0.375,0.5,0.625,0.5,0.375,0.75,0.625,0.75,0.375,1,0.625,1,0.875,0,0.875,0.25， 0.125,0,0.125,0.25]]

function init() {

        // renderer

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(window.innerWidth, window.innerHeight);

        container = document.getElementById('container');
        container.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
        camera.position.z = 5;

        cameraControls = new THREE.TrackballControls(camera, renderer.domElement);
        cameraControls.target.set(0, 0, 0);

        scene = new THREE.Scene();

        light = new THREE.AmbientLight( 0xffffff );
        scene.add( light );

        material = new THREE.MeshPhongMaterial( { 
            map: THREE.ImageUtils.loadTexture('images/box_texture.jpg') 
        } );       

        group = new THREE.Object3D();

        var loader = new THREE.JSONLoader();
        loader.load('models/cube_1.js', modelLoadedCallback);

        window.addEventListener( 'resize', onWindowResize, false );

}

function modelLoadedCallback(geometry) {

        mesh = new THREE.Mesh( geometry, material );
        group.add(mesh);
    //     scene.add (new THREE.Mesh (geometry,
    // new THREE.MeshBasicMaterial ({ color: 0x000000, wireframe: true })));
        scene.add (new THREE.Mesh (geometry, material));
        scene.add( group );

}

function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        render();

}

function animate() {

        var delta = clock.getDelta();

        requestAnimationFrame(animate);

        cameraControls.update(delta);

        renderer.render(scene, camera);

}

Answer 1

會有所幫助

var texture = THREE.ImageUtils.loadTexture('images/box_texture.jpg') ;

並添加：

texture.flipY = false;