Three.js 三重纹理反转_Three.js

Three.js 三重纹理反转

three.js

Three.js 三重纹理反转,three.js,Three.js,我对threejs不太熟悉，只是做了一个背面有纹理的基本立方体。我在纹理的颜色边上有文字。然而，这些话却像镜子一样。我怎样才能让它们正确地显示出来您可以做两件事：反转或旋转立方体上每个面的UV坐标，直到获得所需的结果。这很容易，因为立方体的UV坐标通常为0.0和1.0 使用图像包根据需要旋转纹理可以按负比例缩放立方体以撤消镜像效果，如下所示： cube.scale.x = -1; 我想我和你在立方体纹理方面有同样的问题据我所知，除了背面，所有的表面都有正确的方向。我解决这个问题的方法是

我对threejs不太熟悉，只是做了一个背面有纹理的基本立方体。我在纹理的颜色边上有文字。然而，这些话却像镜子一样。我怎样才能让它们正确地显示出来

您可以做两件事：

反转或旋转立方体上每个面的UV坐标，直到获得所需的结果。这很容易，因为立方体的UV坐标通常为0.0和1.0

使用图像包根据需要旋转纹理

可以按负比例缩放立方体以撤消镜像效果，如下所示：

cube.scale.x = -1;

我想我和你在立方体纹理方面有同样的问题

据我所知，除了背面，所有的表面都有正确的方向。我解决这个问题的方法是在每个面的立方体上放置纹理，然后改变背面的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>


变量
场景、摄影机、渲染器；几何、材料；var modarray=[]；
var材料=[]；var旋转=0；init（）；制作动画（）；函数init（）
{
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
渲染器.setSize（window.innerWidth，100）；
document.body.appendChild（renderer.doElement）；
/////////////摄像机/////////////
摄像头=新的三个正交摄像头（window.innerWidth/-2，
窗宽/2100/2100/-2，-500，1000）；
camera.position.z=2000；camera.position.y=0；camera.position.x=0；scene=new THREE.scene（）；
几何图形=新的三个.BoxGeometry（50,50,50）；geometry2=新的三个.BoxGeometry（50,50,50）；
/////////////////////////////////存储块的材料//
///////////////////////////////var砖；材料[0]=新
三、网格材质（{map:
三个.ImageUtils.loadTexture（'10.png'）}）；
var basex=-455//////////////////////////////////////////////////
//矢量阵列用于保存UV将放置的位置//
//////////////////////////////////////////////////砖块=[新的]
三个。向量2（1，0），新的三个。向量2（1，1），新的
三个向量2（0，1），新的三个向量3（0，0）]；
///////////////////////////////////////////////////////选择什么
面向此ECECTS from vertex array///在本例中为背面
////选择三角形的方向//
/////////////////////////////////////////////////////
geometry.faceVertexUvs[0][10]=[bricks[0]，bricks[1]，bricks[3]；
geometry.faceVertexUvs[0][11]=[bricks[1]，bricks[2]，bricks[3]；
modarray[0]=新的三点网格（几何体，材质[0]）；modarray[1]=新的三点网格（几何体，材质[0]）；
modarray[0]。位置.x=basex；modarray[0]。位置.z=1000；
modarray[0].位置.y=0；
scene.add（modarray[0]）；
modarray[1]。位置.x=basex+65；modarray[1]。位置.z=1000；
modarray[1]。位置。y=0；
scene.add（modarray[0]）；scene.add（modarray[1]）；
////////////LIGHT/////var light2=new
三.环境灯（0xffffff）；灯2.位置设置（01002000）；
场景。添加（light2）；
}
//////////////////////动画循环/////////////////////
函数animate（）{
requestAnimationFrame（动画）；var标志=0；
对于（n=0；n