无法使用three.js加载个人3d模型
[英]Can't load personal 3d model using three.js
问题描述
js, and I spent 2 days trying to follow tutorials on loading my own 3d model. 
js，我花了 2 天时间尝试按照教程加载我自己的 3d 模型。 IN my eye everything seems like it should be correct, but I'm not getting a model returned in my browser.在我看来，一切似乎都应该是正确的，但我的浏览器中没有返回模型。
I have checked the model is correct and loads in other places.我已经检查过模型是否正确并在其他地方加载。
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>
I'm sorry if this is vague but I'm just lost, I feel like I'm missing one bit of information to understand how there.js works.如果这很模糊，我很抱歉，但我只是迷路了，我觉得我错过了一些信息来了解 there.js 是如何工作的。
1 个解决方案
解决方案1
0 2021-11-01 05:20:57
Try this尝试这个
gltfLoader.load("yourModel.gltf", (gltf) => {
gltf.scene.scale.set(0.5, 0.5, 0.5);
scene.add(gltf.scene);
}
Sometimes the model doesn't show because of the scale.有时模型不显示因为比例。 It might be too big or too small.它可能太大或太小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.