After spending two full days attempting to follow tutorials on how to load my own 3D model using JavaScript, I'm still unable to get the model to display in my browser. Everything appears to be set up correctly from my perspective, yet nothing is showing up.
I have double-checked that the model loads properly in other environments.
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>This situation feels overwhelming and confusing, as if there's a crucial piece of information missing to fully comprehend how everything works within three.js.