我想使用Three.js显示glTF文件。由于CORS政策，我正在使用本地服务器（Servez）。当我在Mozilla Firefox上运行它时，它没有错误，但是仍然没有显示任何内容。在Chrome上执行相同操作时，显示-“不允许加载本地资源：”。即使我已经使用了Chrome Web Server扩展程序，但在两个浏览器上仍能得到相同的结果。
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>您的路径无处不在
此
<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';
并且您应该将文件整理成类似的样子
+-somefolder
+-yourpage.html
+-scene.gltf
+-scene.bin
+-three.js-master
+-build
| +-three.module.js
+-examples
+-jsm
+-controls
| +-OrbitControls.js
+-loaders
+-GLTFLoader.js
换句话说，将项目的所有文件放在somefolder下。然后投放somefolder并加载yourpage.html