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
It’s not possible to access local file system directly without a webserver serving them properly. Vite can do that for you though - if you put teapot.obj in public/ and then use /teapot.obj path, it should load ok.
1 Like
I tried it, the page is still blank.
Mixing imports from unpkg and ‘three’ will be a problem, I’m very surprised if there are no errors doing that. Make sure to load all three.js JS modules from the same place.
I’d also suggest assigning a background color that isn’t black, in case your lighting isn’t bright enough you’ll still see a dark outline.
Finally, if you don’t know the size or initial position of the object, you may want to log those for debugging.
const bbox = new THREE.Box3().setFromObject(object);
console.log(bbox);
We can help more with runnable code than screenshots of code, please share more than screenshots whenever possible. 
Ok!, here’s the js code in my side:
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);
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 );
}
also the index.html
<!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>
I added a random cyclinder and the lighting is ok
I am not familiar with Vite but where is your three/addons/ declared?
Is your OBJLoader getting fetched at all?
The cylinder is being created directly from THREE, which is getting imported from unpkg.
This is a vite app, you npm installed three, you don’t import from unpkg but just three. Like don said, you cannot mix imports or else you will end up with multiple threes.
import * as THREE from ‘three’;
Like mj said, teapot.obj must be inside /public.
You also miss a render loop. In threejs everything is async, if you want to use callbacks then by the time the model has loaded the one render call you executed came too early. Always use async/await, create a render loop. That’s why you don’t see the pot.
1 Like