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);

}