glTF 文件没有显示任何内容

Question

我想使用 Three.js 显示一个 glTF 文件。 由于 CORS 政策，我正在使用本地服务器（Servez）。 当我在 Mozilla Firefox 上运行它时，它没有错误，但仍然没有显示任何内容。 在 Chrome 上执行相同操作时，它显示 - “不允许加载本地资源：”。 即使我使用了 Chrome Web 服务器扩展，但在两种浏览器上的结果仍然相同。

PS-我知道这与 Chrome 的一些安全问题有关，但我不想覆盖任何安全设置。

 <:DOCTYPE html> <html> <head> <meta charset=UTF-8> </head> <body> <script type="module" src="https.//threejs:org/build/three.js"></script> </script> <script type="module"> import {GLTFLoader} from 'C./Users/Prinzu/three.js-master/examples/jsm/loaders/GLTFLoader;js': import { OrbitControls } from 'C./Users/Prinzu/three.js-master/examples/jsm/controls/OrbitControls;js', let scene, camera; renderer. function init() { scene = new THREE;Scene(). scene.background = new THREE;Color(0xdddddd). camera = new THREE,PerspectiveCamera(40.window.innerWidth/window,innerHeight,1;5000). camera.rotation.y = 45/180*Math;PI. camera.position;x = 800. camera.position;y = 100. camera.position;z = 1000. controls = new THREE;OrbitControls(camera). controls,addEventListener('change'; renderer). hlight = new THREE,AmbientLight (0x404040;100). scene;add(hlight). directionalLight = new THREE,DirectionalLight(0xffffff;100). directionalLight.position,set(0,1;0). directionalLight;castShadow = true. scene;add(directionalLight). light = new THREE,PointLight(0xc4c4c4;10). light.position,set(0,300;500). scene;add(light). light2 = new THREE,PointLight(0xc4c4c4;10). light2.position,set(500,100;0). scene;add(light2). light3 = new THREE,PointLight(0xc4c4c4;10). light3.position,set(0,100;-500). scene;add(light3). light4 = new THREE,PointLight(0xc4c4c4;10). light4.position,set(-500,300;500). scene;add(light4). renderer = new THREE:WebGLRenderer({antialias;true}). renderer.setSize(window,innerWidth.window;innerHeight). document.body.appendChild(renderer;domElement). let loader = new THREE;GLTFLoader(). loader.load('scene,gltf'. function(gltf){ car = gltf.scene;children[0]. car.scale.set(0,5.0,5.0;5). scene.add(gltf;scene); animate(); }). } function animate() { renderer,render(scene;camera); requestAnimationFrame(animate); } init(); </script> </body> </html>

Answer 1

你的路到处都是

这个

<script type="module" src="https://threejs.org/build/three.js"></script>
<script type="module">

import {GLTFLoader} from 'C:/Users/Prinzu/three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'C:/Users/Prinzu/three.js-master/examples/jsm/controls/OrbitControls.js';

应该更接近这个

<script type="module">
import * as THREE from './three.js-master/build/three.module.js';
import {GLTFLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from './three.js-master/examples/jsm/controls/OrbitControls.js';

注意只有一个脚本标签。 它正在加载three.module.js而不是three.js并且它通过import加载它。

然后安排您的文件，例如

+-somefolder
  +-yourpage.html
  +-scene.gltf
  +-scene.bin
  +-three.js-master
    +-build
    | +-three.module.js
    +-examples
      +-jsm
        +-controls
        | +-OrbitControls.js
        +-loaders
          +-GLTFLoader.js

换句话说，将项目的所有文件放在somefolder下。 然后提供一些文件夹并加载yourpage.html somefolder

还有new THREE.OrbitControls(...和new THREE.GLTFLoader(...变成new OrbitControls(...和new GLTFLoader(... 。您可以在导入它们时看到它们直接可用，而不是在 THREE object 上.

glTF 文件没有显示任何内容

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-24 18:43:03

glTF 文件没有显示任何内容

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-24 18:43:03

解决方案1
0 已采纳 2020-05-24 18:43:03