Recently, I've been attempting to incorporate a 3D module into my three.js project. In my quest for answers, I delved into the documentation available here and here. However, no matter what I tried, all I saw was darkness. I even adjusted the Camera's z position to 5, but to no avail. This is just the beginning of my journey with Three.js. Interestingly, when I loaded the model on online Three.js viewers, it worked perfectly fine. Here's a snippet of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import 3D Model into Three JS</title>
<link rel="stylesheet" href="../common.css">
</head>
<body>
<div id="container">
</div>
</body>
<script src="../three.js-master/build/three.js"></script>
<script type="module">
// import { THREE } from '../three.js-master/build/three.js';
import { GLTFLoader } from '../three.js-master/examples/jsm/loaders/GLTFLoader.js';
const container = document.querySelector('div#container');
const path_to_model = './Mini-Game Variety Pack/Models/gltf/tree_forest.gltf.glb';
const loader = new GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
loader.load(path_to_model, function (gltf)
{
console.log('Adding glTF model to scene...');
scene.add(gltf.scene);
console.log('Model added.');
console.log('Moving camera 5z...');
camera.position.z = 5;
console.log('Camera moved.');
}, undefined, function (error)
{
console.error(error);
});
container.appendChild(renderer.domElement);
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</html>I have organized my folders in the following manner:
- Three JS/
- common.css
- three.js-master/
- ImportModel/
- index.html
- Mini-Game Variety Pack/
- Models/
- gltf/
- tree_forest.glb
- tree_forest.gltf.glb
- gltf/
- Models/
(Please note that not all files are displayed, only those deemed necessary)
The models were downloaded from here, specifically utilizing the tree_forest model.
Upon loading the page, this is the bleak sight that greets me:
https://i.sstatic.net/Di37q.png
Currently, I am utilizing a Mac and running Five Server within VSCode.