1. 引入对应3d类型的解析文件包（这里以.obj为例）OBJLoader.zip
    2. 示例
      1. 如未设置循环渲染，渲染执行要在模型加载后的回调函数内执行
      2. 加载完3d模型之后，要循环遍历每个子元素给它附上皮肤 ```javascript let scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(70, 500 / 500, 1, 1000) camera.position.z = 2; const renderer = new THREE.WebGLRenderer();

    //定义控制器 function initControl() { const controls = new THREE.OrbitControls(camera, renderer.domElement);

    1. // 如果使用animate方法时，将此函数删除
    2. controls.addEventListener('change', render);
    4. // 使动画循环使用时阻尼或自转 意思是否有惯性
    5. controls.enableDamping = true;
    7. //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    8. controls.dampingFactor = 1.5;
    10. //是否可以缩放
    11. controls.enableZoom = true;
    13. //是否自动旋转
    14. controls.autoRotate = true;
    16. //设置相机距离原点的最远距离
    17. controls.minDistance = 1;
    19. //设置相机距离原点的最远距离
    20. controls.maxDistance = 200;
    22. //是否开启右键拖拽
    23. controls.enablePan = true;

    }

    //定义渲染 function render() { renderer.setSize(500, 500) document.body.appendChild(renderer.domElement) renderer.render(scene, camera) }

    const loader = new THREE.OBJLoader(); loader.load( ‘./lib/source’, obj => { const material = new THREE.MeshBasicMaterial({ color: ‘blue’ }) obj.children.forEach(function (child) { //给每个子元素赋值纹理 child.material = material; //更新每个子元素的面和顶点的法向量 // child.geometry.computeFaceNormals(); // child.geometry.computeVertexNormals(); }); scene.add(obj) initControl(); render(); } ) ```