时间戳

首页 > 解决方案 > THREE.js - 如何加载对象？

javascript - THREE.js - 如何加载对象？

问题描述

我刚开始学习 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.

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

标签： javascriptthree.js

解决方案

这是一个示例（基于一些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>

推荐阅读