Question

我疯狂地试图翻转我的立方体的脸，以便在正确的方向看到它们，但我无法想出任何东西。我的代码是这样的：

window.onload = function()
{
    var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize( 990, 350 );
    renderer.setClearColor( 0x000000, 1);
    document.getElementsByTagName('body')[0].appendChild( renderer.domElement );

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(
        35,             // Field of view
        990 / 350,      // Aspect ratio
        0.1,            // Near plane
        10000           // Far plane
    );
    camera.position.set( 0, 0, -730 );

    var geometry = new THREE.BoxGeometry( 990, 350, 350 );
    geometry.uvsNeedUpdate = true;
    geometry.dynamic = true;
    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face1.jpg',{},onTextureLoad)}));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face2.jpg',{},onTextureLoad ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face3.jpg',{},onTextureLoad ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face4.jpg',{},onTextureLoad ), side: THREE.DoubleSide }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face5.jpg',{},onTextureLoad ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'face6.jpg' )}));
    var material = new THREE.MeshFaceMaterial(materialArray);

    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    mesh.rotation.x  = 360;
    var position = new THREE.Vector3();
    position.setFromMatrixPosition( mesh.matrixWorld );

    camera.lookAt( position );

    var light = new THREE.PointLight( 0xFFFFFF );
    light.position.set( 10, 0, 10 );
    scene.add( light );

    function animate()
    {
        mesh.rotation.x += 0.01;
        renderer.render( scene, camera );
        requestAnimationFrame(animate);
    }

    function onTextureLoad(p)
    {
        p.flipY = false;
    }

    animate();
}

我得到的是这个： https://dl.dropboxusercontent.com/u/4064417/hosted_images/index.html

我应该怎么做才能正确翻转我的图像？

提前谢谢！

编辑：我也试过用这种方式翻转UV坐标：

    geometry.faceVertexUvs[0][7] = [new THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1)];

但我不明白如何设置这些值以获得我的目标。

Answer 1

尝试

geometry.faceVertexUvs[0][7] = [new THREE.Vector2(0, 0), new THREE.Vector2(0, 1), new THREE.Vector2(1, 1)];

Three.js BoxGeometry面部纹理翻转

1 个答案: