我尝试在本地编辑后将GLTF文件查看器插入到要上传到服务器的HTML文件中（当前只有HTML和GLB存储在本地，脚本标记中引用了三个. js）。
在目前的设定下，网页会在.scene div中产生适当的全屏幕检视画布，但不会载入glb档案。
在回答中，请包括完整的修改html文件与任何问题确定。非常感谢提前。
JS来自堆栈溢出：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
overflow: hidden;
}
.scene,
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="scene"></div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
//Variables for setup
let container;
let camera;
let renderer;
let scene;
let house;
let mixer;
const clock = new THREE.Clock();
function init() {
container = document.querySelector(".scene");
//Create scene
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 1;
const far = 10000;
//Camera setup
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 1000);
const ambient = new THREE.AmbientLight(0x404040, 1);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 1);
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);
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
const dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('https://threejs.org/examples/js/libs/draco/gltf/');
//Load Model
let loader = new THREE.GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load("./test_file.glb", function (gltf) {
scene.add(gltf.scene);
house = gltf.scene.children[0];
mixer = new THREE.AnimationMixer(house);
mixer.clipAction(gltf.animations[0]).play();
animate();
});
}
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mixer.update(delta);
house.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);
</script>
</body>
</html>
1条答案
按热度按时间brjng4g31#
已解决。
浏览器CORS策略出现问题在与主机位置相同服务器中加载可解决报告问题文件路由必须使用http或https