Three.js学习记录（加载任意尺⼨OBJ模型）
任意尺⼨OBJ模型的加载问题
通过以下⼏个⽅⾯确保对于任何尺⼨的模型，模型都能够在⽹页中合理的显⽰：
模型的加载⽐例均为1，摄像机的z向坐标值根据模型尺⼨动态调整；
计算模型的包围盒，使模型位于世界坐标原点；
选⽤合适的光源，如基础光源和平⾏光源。
（1）列出加载OBJ模型需要使⽤到的外部JavaScript库
<script src="../build/three.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/controls/DragControls.js"></script>
<script src="js/libs/stats.min.js"></script>
（2）定义变量
let camera, scene, renderer,controls,stats;//基本构件
广东乌龙茶
let objects =[];//拖拽控制
let group =new THREE.Group();//加载obj
let i,m,x,y,z;//相机⾃定位
let dragControls;//模型拖拽
社会保险有哪些（3）初始化渲染器、场景、摄像机、灯光，其中摄像机采⽤的是透视摄像机，摄像机的z向坐标值由模型尺⼨决定；灯光使⽤的是平⾏光源和基础光源；添加Stats进⾏性能监测，对于⼩型OBJ模型，帧数可以达到60。
//初始化渲染器
renderer =new THREE.WebGLRenderer({antialias:true});
renderer.tPixelRatio(window.devicePixelRatio);
renderer.tSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
renderer.tClearColor(0x000000,1);
//浏览器屏幕纵横⽐
i=window.innerHeight/window.innerWidth;
//初始化场景
scene =new THREE.Scene();
//初始化相机
camera =new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1,100000000);
//初始化灯光
let ambientLight =new THREE.AmbientLight(0xcccccc,0.6);
scene.add(ambientLight);
let a=1,b=0.6,c=10;
let directionalLight1 =new THREE.DirectionalLight(0xffffff,b);
directionalLight1.position.t(-a,-a,a*c).normalize();
let directionalLight2 =new THREE.DirectionalLight(0xffffff,b);
directionalLight2.position.t(a,-a,-a*c).normalize();
let directionalLight3 =new THREE.DirectionalLight(0xffffff,b);
directionalLight3.position.t(-a,a,-a*c).normalize();
let directionalLight4 =new THREE.DirectionalLight(0xffffff,b);
directionalLight4.position.t(a,a,a*c).normalize();
scene.add(directionalLight1);
scene.add(directionalLight2);
scene.add(directionalLight3);
scene.add(directionalLight4);
//初始化控制器
controls =new THREE.OrbitControls(camera);
controls.panSpeed =3;
controls.staticMoving =true;
controls.dynamicDampingFactor =0.3;
//初始化性能检测器
stats =new Stats();
document.body.appendChild( stats.dom );
（4）加载OBJ模型，模型的加载⽐例均为1，通过计算确定摄像机z坐标的数值，确保⽆论任何模型都能够在页⾯中合理的显⽰。
OBJ和MTL是相互配合的两种格式，经常⼀起使⽤：在obj⽂件中，模型由三⾓⾯⽚组成，存储着三⾓⾯⽚的顶点、纹理坐标、顶点法向量、⾯等数据；在mtl⽂件中，存储着模型的材质数据。
//加载模型⽂件obj+mtl
let objloader =new THREE.OBJLoader();
let mtlloader =new THREE.MTLLoader();
//⽂件路径
Add(objloader,mtlloader,"models/blue");
function Add(objloader,mtlloader, name){
mtlloader.load(name +'.mtl',function(materials){
materials.preload();
objloader.tMaterials(materials);
支教教师objloader.load(name +'.obj',function(object){
object.scale.t(1,1,1);
child.castShadow =true;
objects.push(child);
},{normalizeRGB:true});
感谢不完美的自己object.position.t(0,0,0);
let bbox =new THREE.Box3().tFromObject(object);
x=bbox.max.x-bbox.min.x;
y=bbox.max.y-bbox.min.y;
z=bbox.max.z-bbox.min.z;
object.position.t(-(bbox.max.x+bbox.min.x)/2,
-(bbox.max.y+bbox.min.y)/2,
-(bbox.max.z+bbox.min.z)/2);
if(y/x>=i)
{
let h=y;
提前转正申请let Fov= camera.fov * Math.PI/180;
m=h/(2* Math.tan(Fov*0.5));
camera.position.y =0;
camera.position.z =2*m+(z/2);
camera.position.x =0;
}
el
{
let w=x;
let h=w*i;
let Fov= camera.fov * Math.PI/180;
检讨书模板
m=h/(2* Math.tan(Fov*0.5));
camera.position.y =0;
camera.position.z =2*m+(z/2);
camera.position.x =0;
}
group.add(object);
scene.add(group);
});
});
}
（5）模型拖拽
//模型拖拽
dragControls =new THREE.DragControls(objects, camera, renderer.domElement); dragControls.addEventListener('dragstart',function(){
});
dragControls.addEventListener('dragend',function(){骆驼祥子名句
});
（6）屏幕⾃适应以及渲染循环
//屏幕⾃适应
window.addEventListener('resize', onWindowResize,fal);
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.tSize(window.innerWidth, window.innerHeight);
}
//帧循环
function animate(){
requestAnimationFrame(animate);
render();
}
//渲染循环
function render(){
camera.updateProjectionMatrix();
controls.update();
stats.update();
}
下⾯为完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>models</title>
<meta http-equiv="Content-Type" content="text/html; chart=utf-8"/>
<meta name="viewport" content="width=device-width, ur-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style>
body {
font-family: Monospace;
background-color: #fff;
color: #000;
margin:0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
从头再来歌曲
<script src="js/controls/TrackballControls.js"></script>
<script src="js/controls/DragControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script >
let camera, scene, renderer,controls,stats;//基本构件
let objects =[];//拖拽控制
let group =new THREE.Group();//加载obj
let i,m,x,y,z;//相机⾃定位
let dragControls;//模型拖拽
init();
animate();
function init(){
//初始化渲染器
//初始化渲染器
renderer =new THREE.WebGLRenderer({antialias:true});
renderer.tPixelRatio(window.devicePixelRatio);
renderer.tSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
renderer.tClearColor(0x000000,1);
//浏览器屏幕纵横⽐
i=window.innerHeight/window.innerWidth;
//初始化场景
scene =new THREE.Scene();
//初始化相机
camera =new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1,100000000); //初始化灯光
let ambientLight =new THREE.AmbientLight(0xcccccc,0.6);
scene.add(ambientLight);
let a=1,b=0.6,c=10;
let directionalLight1 =new THREE.DirectionalLight(0xffffff,b);
directionalLight1.position.t(-a,-a,a*c).normalize();
let directionalLight2 =new THREE.DirectionalLight(0xffffff,b);
directionalLight2.position.t(a,-a,-a*c).normalize();
let directionalLight3 =new THREE.DirectionalLight(0xffffff,b);
directionalLight3.position.t(-a,a,-a*c).normalize();
let directionalLight4 =new THREE.DirectionalLight(0xffffff,b);
directionalLight4.position.t(a,a,a*c).normalize();
scene.add(directionalLight1);
scene.add(directionalLight2);
scene.add(directionalLight3);
scene.add(directionalLight4);
//初始化控制器
controls =new THREE.OrbitControls(camera);
controls.panSpeed =3;
controls.staticMoving =true;
controls.dynamicDampingFactor =0.3;
/
/初始化性能检测器
stats =new Stats();
document.body.appendChild( stats.dom );
//加载模型⽂件obj+mtl
let objloader =new THREE.OBJLoader();
let mtlloader =new THREE.MTLLoader();
//⽂件路径
Add(objloader,mtlloader,"models/blue");
function Add(objloader,mtlloader, name){
mtlloader.load(name +'.mtl',function(materials){
materials.preload();
objloader.tMaterials(materials);
objloader.load(name +'.obj',function(object){
object.scale.t(1,1,1);
child.castShadow =true;
objects.push(child);
},{normalizeRGB:true});
object.position.t(0,0,0);
