效果圖：
202006162310.gif
想詳細(xì)了解3D模型的導(dǎo)入，可參考之前的文章。點(diǎn)擊查看
??知識點(diǎn)：
- OBJLoader 模型文件加載器，點(diǎn)擊查看 ；
<!-- 引入obj模型加載庫OBJLoader.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script>
- MTLLoader 材質(zhì)文件加載器，點(diǎn)擊查看;
<!-- 引入obj模型材質(zhì)加載庫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窗口區(qū)域滾動條 */
}
.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擴(kuò)展控件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模型材質(zhì)加載庫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>
/**
* 創(chuàng)建場景對象Scene
*/
var scene = new THREE.Scene();
var OBJ;
/**
* OBJ和材質(zhì)文件mtl加載
*/
var OBJLoader = new THREE.OBJLoader();//obj加載器
var MTLLoader = new THREE.MTLLoader();//材質(zhì)文件加載器
MTLLoader.load('./material.mtl', function (materials) {
// 返回一個包含材質(zhì)的對象MaterialCreator
console.log(materials);
//obj的模型會和MaterialCreator包含的材質(zhì)對應(yīng)起來
OBJLoader.setMaterials(materials);
OBJLoader.load('./model.obj', function (obj) {
scene.add(obj);//返回的組對象插入場景中
obj.children[0].scale.set(5, 5, 5);//網(wǎng)格模型縮放
OBJ = obj.children[0] //賦值，方便更換紋理貼圖
console.log(OBJ)
})
})
// 更換紋理貼圖方法
function changeMap(img) {
// 更換紋理貼圖
var texture = new THREE.TextureLoader().load(img + '.png');
OBJ.material.map = texture
}
/**
* 光源設(shè)置
*/
//點(diǎn)光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點(diǎn)光源位置
// scene.add(point); //點(diǎn)光源添加到場景中
//環(huán)境光
var ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
/**
* 相機(jī)設(shè)置
*/
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 150; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
//創(chuàng)建相機(jī)對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設(shè)置相機(jī)位置
camera.lookAt(scene.position); //設(shè)置相機(jī)方向(指向的場景對象)
/**
* 創(chuàng)建渲染器對象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸
renderer.setClearColor(0xffffff, 1); //設(shè)置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
// 渲染函數(shù)
function render() {
renderer.render(scene, camera); //執(zhí)行渲染操作
if (OBJ) {
OBJ.rotation.x += 0.01;//每次繞y軸旋轉(zhuǎn)0.01弧度
}
requestAnimationFrame(render); //請求再次執(zhí)行渲染函數(shù)render，渲染下一幀
}
render();
//創(chuàng)建控件對象 相機(jī)對象camera作為參數(shù) 控件可以監(jiān)聽鼠標(biāo)的變化，改變相機(jī)對象的屬性
var controls = new THREE.OrbitControls(camera);
</script>
</html>
