Recently, I've been experimenting with this project, and after some trial and error, I've managed to get things working to some extent. As a novice in JavaScript, I'm unsure if the issue I'm facing has a simple solution. The problem is that I can't seem to get the light effects on the moon to appear as they do in the original version.
Here's what I've accomplished so far:
<script type="text/javascript" id="mainCode">
var container,
renderer,
scene,
camera,
mesh,
light = {
speed: 0.1,
distance: 1000,
position: new THREE.Vector3(0, 0, 0),
orbit: function (center, time) {
this.position.x =
(center.x + this.distance) * Math.sin(time * -this.speed);
this.position.z =
(center.z + this.distance) * Math.cos(time * this.speed);
}
},
clock,
controls;
init();
function init() {
// selecting the container element from the DOM
container = document.getElementById( "container" );
scene = new THREE.Scene();
var fov = 35,
aspect = window.innerWidth / window.innerHeight,
near = 1,
far = 65536;
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: true});
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 800);
scene.add(camera);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 0.5;
controls.dynamicDampingFactor = 0.5;
clock = new THREE.Clock();
var radius = 100;
var xSegments = 50;
var ySegments = 50;
var geo = new THREE.SphereGeometry(radius, xSegments, ySegments);
var mat = new THREE.ShaderMaterial({
uniforms: {
lightPosition: {
type: 'v3',
value: light.position
},
textureMap: {
type: 't',
value: THREE.ImageUtils.loadTexture( "img/maps/moon.jpg" )
},
normalMap: {
type: 't',
value: THREE.ImageUtils.loadTexture( "img/maps/normal.jpg" )
},
uvScale: {
type: 'v2',
value: new THREE.Vector2(1.0, 1.0)
}
},
vertexShader:document.getElementById('vertexShader').textContent,
fragmentShader:document.getElementById('fragmentShader').textContent
});
mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
mesh.position.set(0, 0, 0);
mesh.rotation.set(0, 180, 0);
scene.add(mesh);
}
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
light.orbit(mesh.position, clock.getElapsedTime());
controls.update(camera);
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', onWindowResize, false);
</script>