threejs uv贴图

本文介绍如何使用 Three.js 在3D模型上应用UV贴图,展示具体的实现效果,帮助读者理解在WebGL场景中进行纹理映射的技术。
摘要由CSDN通过智能技术生成

原始贴图:
123为楼的侧面,45678为楼的正面,9 10 11 12 13为楼的背面,14 15 16为右侧面
实现效果:
在这里插入图片描述

//cube uv贴图
var cubeMaterial=new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture('./img/building.jpg')});
let cubesizex=5.6225;
let cubesizey=3;
let cubesizez=4.2554;  //计算的图片比例,为使图片不拉伸

var cubeGeometry = new THREE.BoxGeometry(cubesizex,cubesizey,cubesizez);

cubeGeometry.faceVertexUvs[0] = [];

let topnormal=new THREE.Vector3(0,-1,0);
let bottomnormal=new THREE.Vector3(0,1,0);
let fontnormal=new THREE.Vector3(0,0,1);
let backnormal=new THREE.Vector3(0,0,-1);
let letfnormal=new THREE.Vector3(1,0,0);
let rightnormal=new THREE.Vector3(-1,0,0);



let siglev=1;
let sigleu=1/51
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值