Currently, I am delving into the world of three.js with the aim of creating a 3D showroom showcasing a few planets. I have managed to create the moon, but alas, all that greets me upon running my code is a dismal black screen. Here's the code I have painstakingly put together so far (even in its updated version, it refuses to cooperate):
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 35;
const aspect = window.innerWidth / innerHeight;
const near = 1;
const far = 65536;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 0);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
const scene = new THREE.Scene();
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(50, 50, 50);
scene.add(light);
//moon
const radius = 100;
const xSegments = 50;
const ySegments = 50;
const geo = new THREE.SphereGeometry(radius, xSegments, ySegments);
function makeInstance(geo, color, x) {
const material = new THREE.MeshPhongMaterial();
const moonMesh = new THREE.Mesh(geo, material);
scene.add(moonMesh);
moonMesh.position.x = x;
return moonMesh
}
moon = makeInstance(geo, 0xffffff, 0);
{
const loader = new THREE.SphereTextureLoader();
const texture = loader.load([
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg',
'https://i.ibb.co/kgYT7L6/ea1d9797c9bf3dda7a23b238e5e4b364.jpg'
]);
scene.background = texture;
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
/* ignore this for now was just testing something
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
moon.forEach((moonMesh, ndx) => {
const speed = 0.5 + ndx * .1;
const rot = time * speed;
moonMesh.rotation.x = rot;
moonMesh.rotation.y = rot;
});*/
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
controls.addEventListener('change', render);
window.addEventListener('resize', render);
window.addEventListener('mousedown', (e) => {
e.preventDefault();
window.focus();
});
window.addEventListener('keydown', (e) => {
e.preventDefault();
});
}
main();
Despite my best efforts, I continue to be greeted by an unyielding dark void on my screen, devoid of errors or warnings. My ultimate goal is to display three planets side by side, starting off with one planet at a time. Unfortunately, I seem to be stuck at square one and can't seem to crack the code.
As an added reference, here's the HTML snippet accompanying my endeavor:
<html>
<head>
<meta charset="utf8">
<title> test2 </title>
<link rel="stylesheet" href="test2.css">
</head>
<body>
<script src="../lib/three.min.js"></script>
<script src="../lib/OrbitControls.js"></script>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="test2.js"></script>
</body>
</html>