[英]Can't load personal 3d model using three.js
js,我花了 2 天时间尝试按照教程加载我自己的 3d 模型。 在我看来,一切似乎都应该是正确的,但我的浏览器中没有返回模型。
我已经检查过模型是否正确并在其他地方加载。
import { GLTFLoader } from "./GLTFLoader.js" const dnaContainer = document.querySelector('#dnaContainer') var dnaScene = new THREE.Scene() var camera = new THREE.PerspectiveCamera(75, dnaContainer.clientWidth / dnaContainer.clientHeight, 0.1, 10) camera.position.z = 3 var renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setClearColor('#0D1033') renderer.setSize(dnaContainer.clientWidth, dnaContainer.clientHeight) dnaContainer.appendChild(renderer.domElement) dnaContainer.addEventListener('resize', () => { renderer.setSize(dnaContainer.clientWidth, dnaContainer.clientHeight) camera.aspect = dnaContainer.clientWidth / dnaContainer.clientHeight }) var dnaLoader = new GLTFLoader() var dna = dnaLoader.load('dna.gltf', function(gltf) { console.log(dnaLoader) dna = gltf.scene dnascene.add(gltf.scene) }) var light = new THREE.HemisphereLight(0xffffff, 5, 10) dnaScene.add(light) var render = function() { requestAnimationFrame(render) renderer.render(dnaScene, camera) } render()
* { box-sizing: border-box; } body { padding: 0; margin: 0; height: 100vh; display: flex; } canvas { display: block; height: 100%; width: 100%; } div { background-color: blueviolet; } #dnaContainer { background-color: black; height: 100vh; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Document</title> </head> <body> <div id="dnaContainer"> </div> <script src="three.js"></script> <script type="module" src="GLTFLoader.js"></script> <script type="module" src="main.js"></script> </body> </html>
如果这很模糊,我很抱歉,但我只是迷路了,我觉得我错过了一些信息来了解 there.js 是如何工作的。
尝试这个
gltfLoader.load("yourModel.gltf", (gltf) => {
gltf.scene.scale.set(0.5, 0.5, 0.5);
scene.add(gltf.scene);
}
有时模型不显示因为比例。 它可能太大或太小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.