这篇文章主要介绍three.js如何加载obj模型，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
我们提供的服务有：做网站、网站制作、微信公众号开发、网站优化、网站认证、惠山ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的惠山网站制作公司
three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。好了，下面通过一段代码给大家介绍three.js加载obj模型，具体代码如下所示：
var scene = null;
var camera = null;
var renderer = null;
var mesh = null;
var id = null;
function init() {
renderer = new THREE.WebGLRenderer({//渲染器
canvas: document.getElementById('mainCanvas')//画布
});
renderer.setClearColor(0x000000);//画布颜色
scene = new THREE.Scene();//创建场景
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);//正交投影照相机
camera.position.set(15, 25, 25);//相机位置
camera.lookAt(new THREE.Vector3(0, 2, 0));//lookAt()设置相机所看的位置
scene.add(camera);//把相机添加到场景中
var loader = new THREE.OBJLoader();//在init函数中，创建loader变量，用于导入模型
loader.load('libs/port.obj', function(obj) {//第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
mesh = obj;//储存到全局变量中
scene.add(obj);//将导入的模型添加到场景中
});
var light = new THREE.DirectionalLight(0xffffff);//光源颜色
light.position.set(20, 10, 5);//光源位置
scene.add(light);//光源添加到场景中
id = setInterval(draw, 20);//每隔20s重绘一次
}
function draw() {//们在重绘函数中让茶壶旋转：
renderer.render(scene, camera);//调用WebGLRenderer的render函数刷新场景
mesh.rotation.y += 0.01;//添加动画
if (mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}
}
