任意尺寸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.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
renderer.setClearColor(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.set(-a,-a,a*c).normalize();
let directionalLight2 = new THREE.DirectionalLight(0xffffff,b);
directionalLight2.position.set(a,-a,-a*c).normalize();
let directionalLight3 = new THREE.DirectionalLight(0xffffff,b);
directionalLight3.position.set(-a,a,-a*c).normalize();
let directionalLight4 = new THREE.DirectionalLight(0xffffff,b);
directionalLight4.position.set(a,a,a*c).normalize();
scene.add(directionalLight1);
scene.add(directionalLight2);
scene.add(directionalLight3);
scene.add(directionalLight4);
//初始化控制器
controls = new THREE.OrbitControls(camera);
controls.rotateSpeed = 3;
controls.zoomSpeed = 3;
controls.panSpeed = 3;
controls.noZoom = false;
controls.noPan = false