I am new to working with Three.js and this is my first major project. Despite its simplicity, I have been struggling for the past two weeks trying to resolve an issue. My goal is to create a model of the Earth in Three.js along with a star field, but I can't seem to get any image other than the Earth itself to work on the second sphere.
Here's the image I'm using for the Earth:
And here are some images I've tried for the star field:
<script>
//pre stuff
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var loader = new THREE.ImageLoader();
camera.position.z = 5;
const canvas = document.querySelector('#c');
var renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var ambient = new THREE.AmbientLight( 0xF6FBFF );
scene.add( ambient );
// main code
var geometry = new THREE.SphereGeometry(2,72,72);
var texture = THREE.ImageUtils.loadTexture('Earth.jpg');
var material = new THREE.MeshPhongMaterial({map: texture});
var sphere = new THREE.Mesh( geometry, material );
sphere.rotateX( .4 );
scene.add( sphere );
var geometry2 = new THREE.SphereGeometry(10,72,72);
var material2 = new THREE.MeshBasicMaterial();
material2.map = THREE.ImageUtils.loadTexture('star-map.jpg')
material2.side = THREE.BackSide
var StarMap = new THREE.Mesh( geometry2, material2 );
scene.add( StarMap );
//animations
var animate = function () {
requestAnimationFrame( animate );
sphere.rotation.y -= 0.002;
renderer.render( scene, camera );
};
animate();