在vue中，threejs如何载入obj模型

叁歲伎倆 2022-11-16 01:50 190阅读 0赞

**· 注意 ·**

##### 一、obj和mtl放在public文件夹中，路径和我下面写的一样就行，这两个loader不会解析动态路径 #####

![在这里插入图片描述][20210406001244472.png]

##### 二、如果碰到 #####

`Handlers.get() has been removed. Use LoadingManager.getHandler() instead`  
这行错误

请在`node_modules/three-obj-mtl-loader/index.js`中  
注释掉543行

// var loader = THREE.Loader.Handlers.get( url );

然后在`var manager=....`的下面增加

var loader = manager.getHandler( url );

如下  
![在这里插入图片描述][20210406001222457.png]

--------------------

首先用npm 安装threejs和相关依赖

npm install three three-orbitcontrols three-obj-mtl-loader stats-js

然后引入

import * as THREE from 'three';
    import OrbitControls from 'three-orbitcontrols'
    import { OBJLoader,MTLLoader} from 'three-obj-mtl-loader'

直接上demo，不需要写任何标签

var container,
        camera,
        scene,
        renderer,
        controls,
        clock;
    
      let init = function () { 
        container = document.createElement('div');
        container.id = 'container';
        document.body.appendChild(container);
    
        renderer = new THREE.WebGLRenderer({ 
          antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
    
        scene = new THREE.Scene();
        var gridHelper = new THREE.GridHelper(100, 10, 0x121c35, 0x121c35);
        scene.add(gridHelper);
    
        scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 2));
    
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200);
        camera.position.set(0, 50, 50);
    
        controls = new OrbitControls(camera, container);
        controls.autoRotate = true;
    
        new MTLLoader().load('static/obj/jian.mtl', function (materials) { 
          materials.preload();
          new OBJLoader().setMaterials(materials).load('static/obj/jian.obj', function (object) { 
            scene.add(object);
            animate();
          });
    
        });
    
        window.addEventListener('resize', onWindowResize, false);
      };
    
      window.onload = init();
    
      function onWindowResize() { 
        let w = window.innerWidth,
          h = window.innerHeight;
        renderer.setSize(w, h);
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
      }
    
      function animate() { 
        requestAnimationFrame(animate);
        render();
      }
    
      function render() { 
        controls.update();
        renderer.render(scene, camera);
      }

到这里只能说初步能跑起来，但更近一步 操作需要去翻手册  
这里推荐 [threejs中文文档][threejs] 和[threejs电子书][threejs 1]

[20210406001244472.png]: /images/20221022/c787ba134c8b4b4d9b3d2fccfa685515.png
[20210406001222457.png]: /images/20221022/af5a3f510e324f5490cfa20fcfae06f6.png
[threejs]: http://www.yanhuangxueyuan.com/threejs/docs/index.html#manual/zh/introduction/Creating-a-scene
[threejs 1]: http://www.yanhuangxueyuan.com/Three.js/