Hey there, I'm new to Three.js and I'm facing an issue where my second geometry is not showing up. I've added the first geometry with all its materials to the scene successfully, but the second one seems to be missing. Any assistance would be greatly appreciated. Thanks in advance!!
// Setting up the Scene and Camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Renderer Initialization
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Adding the First Geometry with Material to the Scene
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh(geometry, material);
scene.add( cube );
// Adding the Second Geometry with Material to the Scene
var mysphere = new THREE.SphereGeometry(5, 32, 32);
var color = new THREE.Color('#ee7800');
var hex = color.getHex;
var sphereMaterial = new THREE.MeshLambertMaterial( { color: hex } );
var sphere = new THREE.Mesh(mysphere, sphereMaterial);
sphere.position.y = 10; // Position adjustment
scene.add( sphere );
// Adjusting the Camera Position
camera.position.z = 5;
// Rendering and Animating the Cube
function render() {
requestAnimationFrame( render );
cube.rotation.x += 0.03;
cube.rotation.y += 0.01;
renderer.render( scene, camera);
};
render();