3D效果图.png
1、前提准备：
html的环境下需要引入MTLLoader.js文件、OBJLoader.js文件以及three.js文件。如果是基于框架开发的话可以直接使用npm包管理工具去下载依赖文件。
npm i three
npm i three-obj-mtl-loader
image.png
2、新建一个场景：
//创建场景，相机，渲染器，网格
var scene,camera,renderer,mesh;
var meshfloor,ambientLight,light;
scene=new THREE.Scene();
camera=new THREE.PerspectiveCamera(90,1280/720,0.1,100);
3、创建网格、以及新建一个地面：
mesh=new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshPhongMaterial({color:0x0000ff,wireframe:false})
)
mesh.receiveShadow=true;
mesh.castShadow=true;
mesh.position.y+=1;
meshfloor=new THREE.Mesh(
new THREE.PlaneGeometry(20,20,10,10),
new THREE.MeshPhongMaterial({color:0xe5e5e5,wireframe:false})
)
meshfloor.rotation.x -=Math.PI/2;
meshfloor.receiveShadow=true;
scene.add(meshfloor);
4、加载模型和材质：
直接加载本地的./models/female02.mtlmtl和obj文件会报跨域的错误，解决方法如下：
- 1、需要自己启动一个node服务端去加载。
- 2、使用IDEA或者webstorm开发工具，因为内部内置了 HTTP 服务器，会帮忙处理file协议
- 3、vscode的话就去安装一个live serve插件，然后会让你选中对应的文件启动，这个插件不止可以解决 ajax 不支持 file 协议的问题，还可以实现在编辑器里保存修改后，页面自动刷新的功能。
在objLoader.load的回调函数中添加mesh.traverse函数的代码，外部导入的模型的阴影添加与mesh的网格图形的阴影添加不同，外部导入的模型添加阴影需要根据mesh的node节点做判断，然后在去添加阴影。不能直接添加。
还有一点，由于相机是看向(0,0,0)方向，则在将人物模型朝向正面的时候就需要旋转30度的角度，如下图所示：
image.png
//加载模型和材质
var mtlLoader=new THREE.MTLLoader();
mtlLoader.load("Models/****.mtl",function(materials){
materials.preload();
var objLoader=new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("Models/****.obj",function(mesh){
//给加载的人物模型加上阴影
mesh.traverse(function(node){
if(node instanceof THREE.Mesh){
node.castShadow=true;
node.receiveShadow=true;
}
});
scene.add(mesh);
mesh.position.set(0,0,-3);
mesh.scale.set(0.01,0.01,0.01);
mesh.rotation.y = Math.PI/6;
});
});
5、添加环境光和点光：
//环境光
ambientLight=new THREE.AmbientLight(0xffffff,0.5);
scene.add(ambientLight);
//点光
light=new THREE.PointLight(0xffffff,0.8,18);
light.position.set(0,2,0);
light.castShadow=true;
light.shadow.camera.near=0.1;
light.shadow.camera.far=25;
scene.add(light);
6、相机位置调整以及渲染器初始化：
camera.position.set(3,3,3);
camera.lookAt(new THREE.Vector3(0,0,0))
renderer=new THREE.WebGLRenderer()
renderer.setSize(1280,720);
7、给渲染器添加阴影以及执行动画帧函数：
//给渲染器添加阴影效果
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.BasicShadowMap;
//把画面插入HTML中的body标签下显示
document.body.appendChild(renderer.domElement);
animate();
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x+=0.01;
mesh.rotation.y+=0.02;
renderer.render(scene,camera);
}