I’ve went through similar question in the forum, and I have seen all the things I’ve fixed. Like, camera positioning (not inside the mesh), calling the render function, setting the (ambient) light. Each and every thing I’ve found so far in the forum I’ve tried, but nothing is working.
Can anyone please look at this fiddle and guide me as to what I am doing wrong?
I feel like it must be something small or obvious, but I am not able to be figure out. Any help is appreciated.
I should stress I’m a total newbie with three.js, so by no means do I have best practices…
To me the setup was a little confusing (once again I’m new so take that with a grain of salt), everything seems to be located all over the place. But I re-organised it and striped out the stuff that wasn’t required. I haven’t got time to go through it right now (I’m at work), plus fiddle is playing up, but here’s your working code.
I would look into re-structuring your code, try and group stuff together thats related to each other, it makes debugging easier.
I added camera controls (arrows and drag), to make my life a little easier and removed the black background.
I should add that if your getting a black screen your doing something correct. three.js starts with a black background (unless specified), so somethings working.
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// setup //
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.set(500, 500, 500);
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
renderer.render(scene, camera);
/// lighting ///
const light = new THREE.AmbientLight(0xffaaff);
light.position.set(10, 10, 10);
scene.add(light);
/// geometry ///
const boxGeometry = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(boxGeometry);
console.log(scene);
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
I hope this helps,
Your camera is too far away. Try it like so: Edit fiddle - JSFiddle - Code Playground
