javascript - 无法使用 three.js 打开 gltf 文件返回错误，对于 GLTFLoader.js 并加载

问题描述

我从three.js 开始，我正在尝试打开一个glTF 3d 模型。我使用 Xampp 作为本地服务器和 Firefox。该脚本本身在控制台中没有问题，但它仍然无法正常工作。控制台返回：

error

bubbles: false

cancelBubble: false

cancelable: false

composed: false

currentTarget: null

defaultPrevented: false

eventPhase: 0

explicitOriginalTarget: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

isTrusted: true

lengthComputable: false

loaded: 0

originalTarget: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

returnValue: true

srcElement: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

target: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

timeStamp: 121

total: 0

type: "error"

<get isTrusted()>: function isTrusted()

<prototype>: ProgressEventPrototype { lengthComputable: Getter, loaded: Getter, total: Getter, … }
GLTFLoader.js:89:14
    _onError http://localhost/3d/GLTFLoader.js:89
    load http://localhost/3d/three.js:26843

这是我的 javascript 脚本：

let container;
let camera;
let renderer;
let scene;
let test;

function init() {
  container = document.querySelector(".scene");

  //Create scene
  scene = new THREE.Scene();

  const fov = 35;
  const aspect = container.clientWidth / container.clientHeight;
  const near = 0.1;
  const far = 1000;

  //Camera setup
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 5, 30);

  const ambient = new THREE.AmbientLight(0x404040, 2);
  scene.add(ambient);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(50, 50, 100);
  scene.add(light);
  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  container.appendChild(renderer.domElement);

  //Load Model
  let loader = new THREE.GLTFLoader();
  loader.load("C:/xampp/htdocs/3d/test_3d.gltf", function(gltf) {
    scene.add(gltf.scene);
    test = gltf.scene.children[0];
    animate();
  });
}

function animate() {
  requestAnimationFrame(animate);
  test.rotation.z += 0.005;
  renderer.render(scene, camera);
}

init();

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener("resize", onWindowResize);

这是我的html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Three.js Crash Course</title>
        <style>
            body {margin: 0;}
            canvas {width: 100%; height: 100%;}
        </style>
    </head>

    <body>
        <div class="scene"></div>
        <script src='3d/three.js'></script>
        <script src='3d/GLTFLoader.js'></script>
        <script src='3d/3d.js' dever></script>
        <!--<script src='3d/jav.js'></script>-->
    </body>

</html>

提前谢谢你的帮助。

标签： javascriptthree.js

javascript - 无法使用 three.js 打开 gltf 文件返回错误，对于 GLTFLoader.js 并加载 _onError 并为 three.js 加载

问题描述

解决方案

推荐阅读