1、创建一个基础场景
包含场景scene、透视相机PerspectiveCamera、控制器OrbitControls、点光源PointLight、半球光HemisphereLight、渲染器WebGLRenderer，以及今天的主角FBXLoader fbx加载器
场景背景颜色设置为0xf65144scene=newTHREE.Scene();
scene.fog=newTHREE.Fog(0x000000,600,3000);//雾化场景scene.background=newTHREE.Color(0xf65144);复制代码
透视相机位置设置为正对x轴camera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);
camera.position.set(0,0,200);//设置相机位置复制代码
灯光采用半球光和点光源两种
半球光用来渲染整个场景的颜色，点光源用来渲染模型高光//设置光照//半球光consthemisphereLight=newTHREE.HemisphereLight(0xffffff,0x444444,1);//hemisphereLight.position.set(0,200,0);scene.add(hemisphereLight);//点光源light=newTHREE.PointLight(0xffff00,2,100);
light.position.set(0,0,0);
scene.add(light);复制代码
...
所有基础元素创建完成后，可以在页面看到这样的场景
接下载要使用到fbxloader
文件的引用复制代码
因为是在html内写的代码，所以路径为当前文件的相对路径，可以根据自己文件位置进行更改
官网内有对于fbx加载器的使用，这里不赘述，主要讲一下材质和贴图
//模型地址consturl="../model/fbx/beats耳机/source/beats_highpoly.fbx"constloader=newTHREE.FBXLoader()
loader.load(
url,function(loadedModel){console.log(loadedModel);
mesh=loadedModel.children[0].clone();
scene.add(mesh);
}
);复制代码
在加载的过程中遇到一些小问题，fbx依赖的Inflate.min.js文件找不到
需要在js中引入intflate.min.js复制代码
加载后可以看出来，没有对模型进行材质的修改和贴图，材质本身是黑色的
在上面代码中，我们打印一下loadedModel 是一个组对象group，组对象没有材质，而且并不是咱们最终要加载的模型对象，可以看一下组对象的children中的结果，有一个mesh对象，这是咱们需要渲染的对象，打印一下可以看到material材质对象
模型本身的材质是一个Phong网格材质
那么一会的贴图也会选择这样的材质
首选如果要贴图肯定需要将贴图加载为纹理，这样就要用到 TextureLoaderconsttextureLoader=newTHREE.TextureLoader();consttextureUrl="../model/fbx/beats耳机/textures/beats_red.png"consttextureNormal=textureLoader.load(
textureUrl
);复制代码
原本贴图样式
这张图，是3D工程师导出工程的时候通过某种手段生成的，感兴趣的童鞋可以跟身边的3D工程师了解
至于每个贴图点，每个位置能够对应上模型，也是在3D工程生成时候计算好的，作为前端只是拿来用就可以
接下来对模型进行材质的重新渲染mesh=loadedModel.children[0].clone();
mesh.material=newTHREE.MeshPhongMaterial({
color:0x00ffff,
})
console.log(mesh);
scene.add(mesh);复制代码
先小试一下
通过已经被改变的颜色不难发现，可以对模型的材质进行修改
接下来需要将我们加载好的纹理贴图和模型结合上，
3D工程师在交给你一项3D工程的时候会有很多贴图，比如发光贴图，凹凸贴图、颜色贴图、环境贴图、等等...
可以通过这里看出来之前默认为null的表示之前并未对它进行材质贴图，也可以通过官网上面的material查看这些贴图具体什么作用
此次我们要对贴图进行重新渲染的是map 颜色贴图
所以将map设置为之前定义的 textureNormal 即可//模型地址consturl="../model/fbx/beats耳机/source/beats_highpoly.fbx";constloader=newTHREE.FBXLoader();
loader.load(url,function(loadedModel){consttextureLoader=newTHREE.TextureLoader();consttextureUrl="../model/fbx/beats耳机/textures/beats_red.png"
consttextureNormal=textureLoader.load(
textureUrl
);
mesh=loadedModel.children[0].clone();
mesh.material.map=textureNormalconsole.log(loadedModel.children[0]);
scene.add(mesh)
});复制代码
接下来我们就可以通过一些微调改变一下模型材质的展示
mesh.material中有一个属性shininess 控制高光显示程度，可以对它进行控制，修改高光具体显示程度
首先要调整的是灯光，我们之前对灯光只是设置上了，并没有调整打光的位置//设置光照
//半球光
consthemisphereLight=newTHREE.HemisphereLight(
0xffaea8,//天空发出颜色
0x7f0900,//地面发出颜色
1//光照强度
);
hemisphereLight.position.set(0,50,60);
scene.add(hemisphereLight);
//聚光灯
constspotLight=newTHREE.SpotLight(0xffffff);
spotLight.position.set(100,60,100);
scene.add(spotLight);
constspotLightHelper=newTHREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);复制代码
在渲染动画中，将点光源进行一个位置的转换，这样就可以调整出不同位置的高光functionanimate(){
requestAnimationFrame(animate);
consttime=Date.now()*0.0005;
if(light){
light.position.x=Math.sin(time*0.7)*50;
//light.position.y=Math.cos(time*0.3)*50;
light.position.z=Math.sin(time*0.5)*50;
}
renderer.render(scene,camera);
}复制代码
最终调整的效果如下：
