我正在嘗試將 GLTF 檔案查看器插入到 HTML 檔案中，以便在本地編輯后上傳到服務器（目前只有 HTML 和 GLB 存盤在本地，腳本標簽中參考了 three.js。
在當前設定下，網頁會在 .scene div 中生成正確的全屏視圖畫布，但不會加載 glb 檔案。
作為回答，請包含已確定任何問題的完整修改的 html 檔案。提前謝謝了。
JS 來自 StackOverflow：
<!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>
uj5u.com熱心網友回復：
解決。
問題在于瀏覽器 CORS 策略。在與主機位置相同的服務器中加載可解決報告的問題。http 或 https 必須用于檔案路由。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462630.html
標籤：javascript html d3.js 3d
上一篇：縮放軸有效，但莖線和圓圈不起作用