js, and I spent 2 days trying to follow tutorials on loading my own 3d model. 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.
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.