无法使用 three.js 加载个人 3d 模型答案

【问题标题】：Can't load personal 3d model using three.js无法使用 three.js 加载个人 3d 模型
【发布时间】：2021-12-15 22:40:45
【问题描述】：

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 的工作原理。

【问题讨论】：

标签： javascript html css three.js

【解决方案1】：

试试这个

gltfLoader.load("yourModel.gltf", (gltf) => {
  gltf.scene.scale.set(0.5, 0.5, 0.5);
  scene.add(gltf.scene);
}

有时模型由于比例而无法显示。它可能太大或太小。

【讨论】：