1.將3ds做好的模型導出成obj（你會得到.obj和.mtl文件）
2.代碼
1）頁面代碼
<html>
<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_Test</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
</style>
</head>
<body>
<script src="three.js"></script>
<script src="OBJLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="main.js"></script>
</body>
</html>
注：OBJLoader.js（https://wow.techbrood.com/libs/threejs/r78/js/loaders/OBJLoader.js），
MTLLoader.js（https://wow.techbrood.com/libs/threejs/r78/js/loaders/MTLLoader.js）
2）JS代碼
//const { XHRLoader } = require("./three"); ~function(){ //創建場景和攝像機 const scene = new THREE.Scene(); //創建攝像機 //const camera = new THREE.PerspectiveCamera(視角,投影窗口的長寬比,開始渲染位置,截止渲染位置); const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); //創建ThreeJS渲染器（抗鋸齒） const renderer = new THREE.WebGLRenderer({antialias:true}); //設置背景色（默認透明） renderer.setClearColor(0x000000,0); //設置背景色 renderer.setClearColor(0x808080); //設置渲染器場景大小 renderer.setSize(window.innerWidth,window.innerHeight); //將構建好的dom添加進去 document.body.appendChild(renderer.domElement); //模型 // var onProgress = function(xhr){ // if(xhr.lengthComputable){ // var percentComplete = xhr.loaded / xhr.total * 100; // console.log(Math.round(percentComplete,2) + '% downloaded'); // } // }; //var onError = function(xhr){}; //補光 var pointColor = "#ffffff"; //var directionLight = new THREE.DirectionalLight(pointColor); var directionLight = new THREE.DirectionalLight(0xbbbbff, 0x444422, 2.5); directionLight.position.set(15, 15, 15); directionLight.castShadow = true; directionLight.shadowCameraNear = 2; directionLight.shadowCameraFar = 100; directionLight.shadowCameraLeft = -150; directionLight.shadowCameraRight = 500; directionLight.shadowCameraTop = 50; directionLight.shadowCameraBottom = -50; directionLight.distance = 10; directionLight.intensity = 0.8; directionLight.shadowMapWidth = 1024; directionLight.shadowMapHeight = 1024; scene.add(directionLight); // var directionLight = new THREE.HemisphereLight( 0xbbbbff, 0x444422, 2.5 ); // directionLight.position.set( 0, 100, 0 ); // scene.add(directionLight); //camera.position.x = 0; //camera.position.y = 0; camera.position.x = 300; //攝像機z軸（距離物體） camera.position.z = 600; //加載model //mtl材質加載器 var mtlLoader = new THREE.MTLLoader(); //mtlLoader.setBaseUrl('/three/models/safa/'); //mtlLoader.setPath('/three/models/safa/'); //加載.mtl文件，執行mtl函數 mtlLoader.load('/three/models/safa/1.mtl',function(materials){ //materials.preload(); var objLoader = new THREE.OBJLoader(); //mtl材質賦值給obj模型 objLoader.setMaterials(materials); //objLoader.setPath('/three/models/safa/'); //加載.obj文件，執行obj函數 objLoader.load('/three/models/safa/1.obj',function(obj){ //放大object對象 obj.scale.set(2,2,2); //obj.position.x = obj.position.y = obj.position.z = 0; //obj.rotation.x = 10; obj.rotation.x = 0.5; //let mesh = obj; //var objLoader = new THREE.OBJLoader(); //對象插入場景對象 scene.add(obj); //渲染器渲染場景和攝像機 renderer.render(scene,camera); }); }); }();
3）效果
注：剛開始加載你可能會碰到看不到的情況（這里可能需要添加燈光和調整相機距離），你可以先使用【Threejs可視化編輯器editor】（https://threejs.org/editor/）導入看一下自己的模型
參考：https://wow.techbrood.com/fiddle/27158
https://blog.csdn.net/weixin_41111068/article/details/81477838
http://feg.netease.com/archives/301.html
https://blog.csdn.net/biyusr/article/details/87781594