THREE.js为正方体的6个面贴上图片

程序员文章站 2022-05-14 19:25:25

...

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>three</title>
</head>
<body>


<script src="../learning-threejs-master/libs/three.js"></script>
<script src="../learning-threejs-master/libs/OrbitControls.js"></script>

<script>
    //创建一个renderer , 
    var renderer = new THREE.WebGLRenderer({antialias:true});
    //设置清空颜色，每秒会渲染60次，渲染的时候会使用此颜色先清空
    renderer.setClearColor( new THREE.Color(0xEEEEEE, 1.0) );
    //设置渲染尺寸
    renderer.setSize( window.innerWidth , window.innerHeight );
    //设置阴影允许
    renderer.shadowMapEnabled = true;
    //将webgl元素添加到body中
    document.body.appendChild( renderer.domElement );


    //创建场景
    var scene = new THREE.Scene();

    //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
    var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight , 0.1 , 10000 );
    //将相机放到x:1000 , y:1000 , z:1000的位置
    camera.position.set( 1000 , 1000 , 1000 );
    //设置相机的朝向，可以认为与相机镜头垂直的轴线应该和哪一个轴相交
    camera.up.set( 0 , 1 , 0 );
    //将相机的镜头对准x:0 , y:0 , z:0的位置 经过这个设置相机就被固定住了
    camera.lookAt({x:0,y:0,z:0});
    //将相机添加到场景中
    scene.add( camera );

    //创建一个自然光，自然光无处不在
    var light1 = new THREE.AmbientLight(0xffffff);
    //设置灯光的位置
    light1.position.set( 1000 , 1000 , 1000 );
    //将灯光加入场景
    scene.add( light1 );


//创建一个长宽高600的立方体
var geometry = new THREE.CubeGeometry( 600 , 600 , 600 );

//创建一个phone材质并且用图片作为纹理
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./texture-atlas.jpg') } );



var bricks = [ 
    new THREE.Vector2(0, .666) , 
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(.5, 1), 
    new THREE.Vector2(0, 1)
];

var clouds = [
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(1, .666), 
    new THREE.Vector2(1, 1), 
    new THREE.Vector2(.5, 1)
];

var crate  = [
    new THREE.Vector2(0, .333), 
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(0, .666)
];

var stone  = [
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(1, .333), 
    new THREE.Vector2(1, .666), 
    new THREE.Vector2(.5, .666)
];

var water  = [
    new THREE.Vector2(0, 0), 
    new THREE.Vector2(.5, 0), 
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(0, .333)
];

var wood   = [
    new THREE.Vector2(.5, 0), 
    new THREE.Vector2(1, 0), 
    new THREE.Vector2(1, .333), 
    new THREE.Vector2(.5, .333)
];


// 清除现有的UV映射，geometry对象的faceVertexUvs属性包含该geometry各个面的坐标映射。
geometry.faceVertexUvs[0] = [];

// 立方体的每个面实际上是由2个三角形组成的。所以我们必须单独映射每个三角形
// 个面的顶点坐标的定义顺序必须遵循逆时针方向。为了映射底部三角形，我们需要使用的顶点指数0，1和3，
// 而要映射顶部三角形，我们需要使用索引1，2，和顶点的3。
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

geometry.faceVertexUvs[0][2] = [ clouds[0], clouds[1], clouds[3] ];
geometry.faceVertexUvs[0][3] = [ clouds[1], clouds[2], clouds[3] ];

geometry.faceVertexUvs[0][4] = [ crate[0], crate[1], crate[3] ];
geometry.faceVertexUvs[0][5] = [ crate[1], crate[2], crate[3] ];

geometry.faceVertexUvs[0][6] = [ stone[0], stone[1], stone[3] ];
geometry.faceVertexUvs[0][7] = [ stone[1], stone[2], stone[3] ];

geometry.faceVertexUvs[0][8] = [ water[0], water[1], water[3] ];
geometry.faceVertexUvs[0][9] = [ water[1], water[2], water[3] ];

geometry.faceVertexUvs[0][10] = [ wood[0], wood[1], wood[3] ];
geometry.faceVertexUvs[0][11] = [ wood[1], wood[2], wood[3] ];

mesh = new THREE.Mesh(geometry,  material);

scene.add( mesh );


    var orbitCtl = new THREE.OrbitControls( camera );
    orbitCtl.autoRotate = false ;


    var clock = new THREE.Clock();

    function threeStart(){
        var delta = clock.getDelta();
        orbitCtl.update( delta );


        renderer.clear();
        renderer.render( scene , camera );
        requestAnimationFrame( threeStart );
    };

    threeStart();


</script>
</body>
</html>

注释

THREE.js为正方体的6个面贴上图片

//此代码所描述的就是上图中坐上角的那个图，坐标系的原点是左下角，（0 , 0.666）表示的是x轴是0y轴是距离原点2/3的地方
//（0.5 , 0.666）表示x轴是0.5 y轴是距离原点2/3的地方，也就是上图中左上那个图的右下方那个点，纹理坐标是逆时针
var bricks = [
  new THREE.Vector2(0, .666),
  new THREE.Vector2(.5, .666),
  new THREE.Vector2(.5, 1),
  new THREE.Vector2(0, 1)
];

geometry对象的faceVertexUvs属性包含该geometry各个面的坐标映射。既然我们映射到一个多维数据集，你可能会疑惑为什么数组中有12个面。原因是在ThreeJS模型中，立方体的每个面实际上是由2个三角形组成的。所以我们必须单独映射每个三角形。上述场景中，ThreeJS将为我们加载单一材料贴图，自动分拆成三角形并映射到每个面。

这里要注意每个面的顶点坐标的定义顺序必须遵循逆时针方向。为了映射底部三角形，我们需要使用的顶点指数0，1和3，而要映射顶部三角形，我们需要使用索引1，2，和顶点的3。
THREE.js为正方体的6个面贴上图片

geometry.faceVertexUvs[0] = [];  //清除现有的UV映射

//重新设置UV映射
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

geometry.faceVertexUvs[0][2] = [ clouds[0], clouds[1], clouds[3] ];
geometry.faceVertexUvs[0][3] = [ clouds[1], clouds[2], clouds[3] ];

geometry.faceVertexUvs[0][4] = [ crate[0], crate[1], crate[3] ];
geometry.faceVertexUvs[0][5] = [ crate[1], crate[2], crate[3] ];

geometry.faceVertexUvs[0][6] = [ stone[0], stone[1], stone[3] ];
geometry.faceVertexUvs[0][7] = [ stone[1], stone[2], stone[3] ];

geometry.faceVertexUvs[0][8] = [ water[0], water[1], water[3] ];
geometry.faceVertexUvs[0][9] = [ water[1], water[2], water[3] ];

geometry.faceVertexUvs[0][10] = [ wood[0], wood[1], wood[3] ];
geometry.faceVertexUvs[0][11] = [ wood[1], wood[2], wood[3] ];