Question

我是新手，只是做一个带有背面纹理的基本立方体。我在纹理的颜色两侧有文字。然而，出来的话反映出像。我怎样才能让它们正确出来。

Answer 1

您可以对立方体进行负面缩放以撤消镜像效果，如下所示：

cube.scale.x = -1;

Answer 2

您可以做两件事：

反转或旋转立方体上每个面上的UV坐标，直到获得所需的结果。这很容易，因为立方体的UV坐标通常为0.0和1.0。
使用图像包根据需要旋转纹理。

Answer 3

我认为在纹理化多维数据集方面我遇到了同样的问题。

据我所知，除了背面外，所有表面都朝向正确方向。我解决这个问题的方法是将纹理放在每个面上的立方体上，然后改变背面的UV贴图。

这解决了背面定向不正确的问题，也是UV映射的结果，我现在能够将纹理放在不规则的面上，就像金字塔一样。

这是通过改变背面UV的解决方案。只需将加载的纹理替换为局部纹理剪切并粘贴到记事本中，然后保存为html文件即可。

 <html> 
 <head>

</head> <body> <script src="js/three.min.js"></script> <script> var
scene, camera, renderer; var geometry, material; var modarray=[];
var material=[]; var rotation=0; init(); animate(); function init() 
{


    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize( window.innerWidth, 100 );
        document.body.appendChild( renderer.domElement );

    ///////////     // Camera//     ///////////
        camera = new THREE.OrthographicCamera( window.innerWidth / - 2, 

window.innerWidth / 2, 100 / 2, 100 / - 2, - 500, 1000 );
        camera.position.z = 2000;   camera.position.y = 0;  camera.position.x = 0;  scene= new THREE.Scene();
        geometry = new THREE.BoxGeometry( 50, 50, 50 );     geometry2 = new THREE.BoxGeometry( 50, 50, 50 );

    ///////////////////////////////     // Store Materials for blocks//
    /////////////////////////////// var bricks;         material[0] = new
THREE.MeshPhongMaterial( { map: 

THREE.ImageUtils.loadTexture('10.png') } );

var basex=-455; //////////////////////////////////////////////////
// Vector array to hold where UV will be placed //
////////////////////////////////////////////////// bricks = [new
THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new 

THREE.Vector2(0, 1), new THREE.Vector3(0, 0)];

///////////////////////////////////////////////////// // choose what
face this eccects from vertex array //  // in this case backside    
// // choose the orientation of the triangles         //
/////////////////////////////////////////////////////
geometry.faceVertexUvs[0][10] = [ bricks[0], bricks[1], bricks[3]];
geometry.faceVertexUvs[0][11] = [ bricks[1], bricks[2], bricks[3]];


        modarray[0] = new THREE.Mesh( geometry, material[0]);   modarray[1] = new THREE.Mesh( geometry2, material[0]);

    modarray[0].position.x=basex;   modarray[0].position.z=1000;
    modarray[0].position.y=0;
        scene.add(modarray[0]);

    modarray[1].position.x=basex+65;    modarray[1].position.z=1000;
    modarray[1].position.y=0;
        scene.add(modarray[0]);     scene.add(modarray[1]);

    //////////  // LIGHT//  //////////  var light2 = new
THREE.AmbientLight(0xffffff);   light2.position.set(0,100,2000);
    scene.add(light2);


}


//////////////////// // Animation Loop // ///////////////////
function animate()  {

        requestAnimationFrame( animate ); var flag=0;

    for(n=0; n<2; n++)  {

            modarray[n].rotation.x=rotation;

    }       rotation+=0.03;

    renderer.render( scene, camera );


}

</script> <p>The cube on the left is with UV mapping to correct the
back surface.

The cube on the right is without the UV mapping.</p> </body>

</html>

三个JS纹理颠倒了

3 个答案: