THREE.js<模型的纹理贴图切换>
2020-06-16 本文已影响0人
誰在花里胡哨
效果图：
202006162310.gif
想详细了解3D模型的导入，可参考之前的文章。点击查看
🎈知识点：
- OBJLoader 模型文件加载器，点击查看 ；
<!-- 引入obj模型加载库OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
- MTLLoader 材质文件加载器，点击查看;
<!-- 引入obj模型材质加载库MTLLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
🎈文件：
image.png
🎈代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
.switchPanel {
width: 100%;
position: fixed;
bottom: 8%;
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
.chartlet {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
margin: 20px;
position: relative;
transition: 0.3s;
}
.chartlet:hover {
box-shadow: 0px 2px 5px #525151;
}
.chartlet img {
width: 100%;
transform-origin: 5% 95%;
position: absolute;
bottom: 0;
transform: scale(4);
}
</style>
<!--引入three.js三维引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<!-- 引入threejs扩展控件OrbitControls.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<!-- 引入obj模型加载库OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
<!-- 引入obj模型材质加载库MTLLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
<div class="switchPanel">
<div class="chartlet" onclick="changeMap('texture1')">
<img src="./texture1.png" alt="">
</div>
<div class="chartlet" onclick="changeMap('texture2')">
<img src="./texture2.png" alt="">
</div>
<div class="chartlet" onclick="changeMap('texture3')">
<img src="./texture3.png" alt="">
</div>
</div>
</body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
var OBJ;
/**
* OBJ和材质文件mtl加载
*/
var OBJLoader = new THREE.OBJLoader();//obj加载器
var MTLLoader = new THREE.MTLLoader();//材质文件加载器
MTLLoader.load('./material.mtl', function (materials) {
// 返回一个包含材质的对象MaterialCreator
console.log(materials);
//obj的模型会和MaterialCreator包含的材质对应起来
OBJLoader.setMaterials(materials);
OBJLoader.load('./model.obj', function (obj) {
scene.add(obj);//返回的组对象插入场景中
obj.children[0].scale.set(5, 5, 5);//网格模型缩放
OBJ = obj.children[0] //赋值，方便更换纹理贴图
console.log(OBJ)
})
})
// 更换纹理贴图方法
function changeMap(img) {
// 更换纹理贴图
var texture = new THREE.TextureLoader().load(img + '.png');
OBJ.material.map = texture
}
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
// scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xffffff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
if (OBJ) {
OBJ.rotation.x += 0.01;//每次绕y轴旋转0.01弧度
}
requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();
//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性
var controls = new THREE.OrbitControls(camera);
</script>
</html>
