It’s my first time using Three.js and I’ve been trying to load in a simple object into my scene, but it doesn’t show, i have lighting in the scene and it doesn’t show any errors. its just black no errors or anything. locally or not
i added a random cylinder to see if its the lighting
import './style.css'
import * as THREE from 'https://unpkg.com/three@0.111.0/build/three.module.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
//import FirstPersonControls from './FirstPersonControls.js'
window.onload = function() { // one big function for all our JavaScript code
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // Scene size (Width, Height)
document.body.appendChild(renderer.domElement);
//Define the WebGL renderer:
//Initialize (create) the scene:
var scene = new THREE.Scene();
//THE CAMERA
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.x= 0; //default value anyway
camera.position.y= 0; //default value anyway
camera.position.z = 100; //We move the camera backwards to see all the scene
camera.lookAt(scene.position);
var col=new THREE.Color( 'skyblue' );
scene.background = new THREE.Color( col );
const loader = new OBJLoader();
loader.load(
'/teapot.obj',
function ( object ) {
scene.add( object );
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( 'An error happened' );
}
);
var pointLight = new THREE.PointLight(0xFFFFFF);
// set the light position:
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 100;
// add the light to the scene:
scene.add(pointLight);
var treeGeometry = new THREE.CylinderGeometry(1, 1, 5, 8);
var treeMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Brown
var tree = new THREE.Mesh(treeGeometry, treeMaterial);
scene.add(tree);
renderer.render( scene, camera );
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Not Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
