THREE.js - 如何加载对象？答案

【问题标题】：THREE.js - How to load objects?THREE.js - 如何加载对象？
【发布时间】：2021-05-03 11:38:00
【问题描述】：

我刚开始学习 THREE.js。虽然我能够很好地制作立方体和球体，但每当我尝试加载 .obj 时，它都会不断抛出随机错误。我完全糊涂了。

// instantiate a loader
const loader = new OBJLoader();

// load a resource
loader.load(
    // resource URL
    'models/boat_large.obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );

    },
    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

我得到错误： OBJLoader is not defined

我将 <script type="module" src="loaders/OBJLoader.js"></script> 添加到我的 html 中，我得到了错误：

Access to script at 'file:///C:/Users/Syzygy/Desktop/hello/www/loaders/OBJLoader.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

我已经按照我能找到的所有教程，我没有任何进展

【问题讨论】：

这能回答你的问题吗？ javascript modules and CORS
@UnholySheep 是也不是。我将文件上传到我的网络主机，现在给我错误Uncaught SyntaxError: Cannot use import statement outside a moduledeadbydawn.io

标签： javascript three.js

【解决方案1】：

尝试添加：

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

【讨论】：

【解决方案2】：

这是一个示例（基于一些 three.js 代码），其中包含所有部分和一些动画。


    <html>
      <body>
        <script type="module">
          import * as THREE from "https://unpkg.com/three@0.125.2/build/three.module.js";
          import { OBJLoader } from "https://unpkg.com/three@0.125.2/examples/jsm/loaders/OBJLoader.js";
    
          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          );
    
          const renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.setClearColor("#ffffff");
          document.body.appendChild(renderer.domElement);
    
          var model;
    
          const loader = new OBJLoader();
          loader.load("obj_model_name.obj", obj => {
            model = obj;
            scene.add(model);
          });
    
          camera.position.set(10, 10, 10);
          camera.lookAt(0, 0, 0);
    
          const animate = function() {
            requestAnimationFrame(animate);
    
            if (model) {
              model.rotation.x += 0.01;
              model.rotation.y += 0.01;
            }
    
            renderer.render(scene, camera);
          };
    
          animate();
        </script>
      </body>
    </html>

【讨论】：

【解决方案3】：

把你的

const loader = new OBJLoader(); ......

【讨论】：

已经是type=module，我还在我的HTML文件中添加了<script type="module" > import {OBJLoader} from "./loaders/OBJLoader.js"; </script>，仍然给我OBJLoader is not defined错误