THREE.js为正方体的6个面贴上图片
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
THREE.js为正方体的6个面贴上图片
##效果图
代码
<!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>
注释
//此代码所描述的就是上图中坐上角的那个图，坐标系的原点是左下角，（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。
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] ];。