three.js加载obj模型

其实在我们工作中用three.js最大的功能是：加载模型，然后展示在浏览器端，支持鼠标事件和键盘事件，标注等，以后的文章会详细对每个进行讲解。

今天主要给大家分享一下怎么加载obj模型（如果模型太大的话，建议转换为json然后再加载后面的文章会分享怎么加载json格式的），加载模型还是离不开那五大步骤不知道的可以查看three.js入门基础这里就不说了，也可以看下面的代码注释：

if (!Detector.webgl) Detector.addGetWebGLMessage();var container, stats;var camera, cameraTarget, scene, renderer;var mouseX = 0, mouseY = 0;var threeModel = document.getElementById('show3dmodel');var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;function init() {             //初始化场景、相机、光、模型    var threeModel = document.getElementById('show3dmodel');    container = document.createElement('div');    threeModel.appendChild(container);    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);    camera.position.set(8, 10, 8);    //设置场景    scene = new THREE.Scene();    // 设置网格     var helper = new THREE.GridHelper(20,2,'#18B756','#B38BB0');     scene.add(helper);    // 设置纹理    var manager = new THREE.LoadingManager();    manager.onProgress = function (item, loaded, total) {        console.log(item, loaded, total);    };    //加载模型        var loader = new THREE.OBJMTLLoader();    loader.load('./files/location_skybox.obj', './files/location_skybox.mtl', function (object) {        scene.add(object);        camera.lookAt(object.position);    }, onProgress, onError);    // 追加环境光    scene.add(new THREE.AmbientLight(0x777777,1.0,0));    addShadowedLight(1, 1, 1, 0xffffff, 1.35);    addShadowedLight(0.5, 1, -1, 0xffaa00, 1);    //生成渲染器对象    renderer = new THREE.WebGLRenderer();    renderer.setPixelRatio(window.devicePixelRatio);    renderer.setSize(window.innerWidth, window.innerHeight);    container.appendChild(renderer.domElement);    // stats 性能检测器    stats = new Stats();    stats.domElement.style.position = 'absolute';    stats.domElement.style.top = '0px';    container.appendChild(stats.domElement);    window.addEventListener('resize', onWindowResize, false);}function onWindowResize() {    windowHalfX = window.innerWidth / 2;    windowHalfY = window.innerHeight / 2;    camera.aspect = window.innerWidth / window.innerHeight;    camera.updateProjectionMatrix();    renderer.setSize(window.innerWidth, window.innerHeight);    controls.handleResize();}//追加阴影function addShadowedLight(x, y, z, color, intensity) {    var directionalLight = new THREE.DirectionalLight(color, intensity);    directionalLight.position.set(x, y, z)    scene.add(directionalLight);    directionalLight.castShadow = true;    var d = 1;    directionalLight.shadowCameraLeft = -d;    directionalLight.shadowCameraRight = d;    directionalLight.shadowCameraTop = d;    directionalLight.shadowCameraBottom = -d;    directionalLight.shadowCameraNear = 1;    directionalLight.shadowCameraFar = 4;    directionalLight.shadowMapWidth = 1024;    directionalLight.shadowMapHeight = 1024;    directionalLight.shadowBias = -0.005;    directionalLight.shadowDarkness = 0.15;}    //循环调用function animate() {    requestAnimationFrame(animate);    render();    stats.update();}   // 为以后鼠标事件和键盘事件重新定位相机位置和重新渲染function render() {    camera.lookAt(scene.position);    renderer.render(scene, camera);}