Javascript 找不到GLTF文件404
因此，我尝试加载GLTF文件，并收到以下错误： 我不知道为什么它不能找到并打开文件。我必须设置本地服务器吗？ 我在网上查阅了其他示例，其中包括一个DRACOLoader。诚然，我不知道这是为了什么，我想知道我是否需要实现这一点以便加载它 这是我的密码：Javascript 找不到GLTF文件404,javascript,three.js,gltf,Javascript,Three.js,Gltf,因此，我尝试加载GLTF文件，并收到以下错误： 我不知道为什么它不能找到并打开文件。我必须设置本地服务器吗？ 我在网上查阅了其他示例，其中包括一个DRACOLoader。诚然，我不知道这是为了什么，我想知道我是否需要实现这一点以便加载它 这是我的密码： <html> <head> <meta charset="utf-8"> <title>Website first attempt</title&g
<html>
<head>
<meta charset="utf-8">
<title>Website first attempt</title>
<style>
body { margin: 0;
background: linear-gradient(to bottom, #33ccff 0%, #ffffff 20%);}
canvas { display: block; }
</style>
</head>
<body>
<!-- <script type = "module" src="build/myScript.js"></script>-->
<script type = "module">
import * as THREE from '../build/three.module.js';
import { GLTFLoader } from '../build/GLTFLoader.js';
let scene, camera, renderer, hlight;
function init () {
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth/ window.innerHeight, 1, 5000);
//light
hlight = new THREE.AmbientLight (0x404040, 100);
scene.add(hlight);
//render
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x000000, 0 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//3d
let loader = new GLTFLoader();
loader.load('assets/londonmap.gltf', function(gltf){
scene.add(gltf.scene);
})
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function animate () {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render( scene, camera );
}
init ();
animate();
</script>
</body>
</html>
网站首次尝试
正文{页边距：0；
背景：线性梯度（至底部，#33ccff 0%，#ffffff 20%）；）
画布{显示：块；}
从“../build/THREE.module.js”将*作为三导入；
从“../build/GLTFLoader.js”导入{GLTFLoader}；
让场景、摄影机、渲染器、灯光；
函数init（）{
//场面
场景=新的三个。场景（）；
//摄像机
摄像头=新的三个透视摄像头（40，window.innerWidth/window.innerHeight，15000）；
//轻的
hlight=新的三点环境光（0x4040401000）；
场景。添加（高亮度）；
//渲染
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setClearColor（0x000000，0）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//三维
let loader=new GLTFLoader（）；
loader.load（'assets/londonmap.gltf'，函数（gltf）{
scene.add（gltf.scene）；
})
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
addEventListener（'resize'，onWindowResize，false）；
函数设置动画（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}
init（）；
制作动画（）；
DracoLoaderglTFassets/londonmap.gltf是的，强烈建议使用本地web服务器。特别是为了避免任何与浏览器安全相关的问题。该项目实际上提供了一个关于此主题的小指南：.
DracoLoaderglTFassets/londonmap.gltf是的，强烈建议使用本地web服务器。特别是为了避免任何与浏览器安全相关的问题。这个项目实际上提供了一个关于这个主题的小指南：。谢谢你的回答。因此，我已经将图像包含在与索引相同的文件夹中，以防它找不到文件夹“资产”，但仍然无法加载它。我也尝试过其他来自互联网的gltf文件，以防我的文件出现问题，但它仍然有相同的错误。我制作了一个本地服务器，但没有用。我真的不知道我做错了什么。考虑把你的项目分享为GITHUB储存库，这样你就更容易看到你在做什么了。对不起，我意识到这个问题是我从搅拌机输出的。我没有意识到我需要三个文件，尽管没有纹理。谢谢@Mugen87。谢谢你的回答。因此，我已经将图像包含在与索引相同的文件夹中，以防它找不到文件夹“资产”，但仍然无法加载它。我也尝试过其他来自互联网的gltf文件，以防我的文件出现问题，但它仍然有相同的错误。我制作了一个本地服务器，但没有用。我真的不知道我做错了什么。考虑把你的项目分享为GITHUB储存库，这样你就更容易看到你在做什么了。对不起，我意识到这个问题是我从搅拌机输出的。我没有意识到我需要三个文件，尽管没有纹理。谢谢你@Mugen87。