Threejs 导入OBJ、GLTF、GLB 模型-526互联

   <script src="../build/three.js"></script>
    <script src="js/controls/OrbitControls.js"></script> // 相机控件
    <script src="js/loaders/OBJLoader.js"></script> // obj 模型
    <script src="js/loaders/GLTFLoader.js"></script> // gltf || glb 模型

    <script>
      // 三维场景
      const scene = new THREE.Scene();

      // obj 模型加载
      const loader = new THREE.OBJLoader();
      // gltf 模型加载
      //  const loader = new THREE.GLTFLoader();

      const width = window.innerWidth; //宽度
      const height = window.innerHeight; //高度

      //   loader.load(
      //     "./models/gltf/demo/apple/scene.gltf",
      //     function (gltf) {
      //       console.log("控制台查看加载gltf文件返回的对象结构", gltf);
      //       console.log("gltf对象场景属性", gltf.scene);
      //       scene.add(gltf.scene);
      //     },
      //     undefined,
      //     (error) => {
      //       console.error(error);
      //     }
      //   );

      loader.load(
        "./models/obj/Banana_01/Banana_01_MESH.obj",
        function (loadedMesh) {
          // 贴图
          loadedMesh.children[0].material.map = new THREE.TextureLoader().load(
            "./models/obj/Banana_01/Banana_01_DIFF.png"
          );

          loadedMesh.scale.set(100, 100, 100);
          scene.add(loadedMesh);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );

      const lightness = new THREE.HemisphereLight(0xffffff, 0x444444);
      lightness.position.set(0, 20, 0);
      scene.add(lightness);
      const shadowLight = new THREE.DirectionalLight(0xffffff);
      shadowLight.position.set(0, 20, 10);
      scene.add(shadowLight);

      // 辅助线
      scene.add(new THREE.AxisHelper(50));

      // 相机
      const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000);
      camera.position.set(0, 0, 0);
      camera.lookAt(0, 0, 0);

      // WebGL渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      //three.js执行渲染命令会输出一个canvas画布(HTML元素)，你可以插入到web页面中
      document.body.appendChild(renderer.domElement);

      const controls = new THREE.OrbitControls(camera, renderer.domElement);
      // 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
      // console.log('controls.target', controls.target);
      controls.target.set(100, 0, 0);
      controls.update(); //update()函数内会执行camera.lookAt(controls.targe)

      // 渲染场景
      function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
      }
      render();
    </script>