WebGL Lunar Ocean

HTML
<div id="WebGL-output"></div> <div id="Stats-output"></div> <div id="container"></div>
CSS
body { margin: 0; overflow: hidden; background: #004076; }
JAVASCRIPT
var container, stats; var camera, controls, scene, renderer; var mesh, texture, geometry, material; var worldWidth = 128, worldDepth = 128, worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2; var sky; var clock = new THREE.Clock(); init(); animate(); function init() { container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 2500); var cameraX = 0; var cameraY = 70; var cameraZ = 0; camera.position.x = cameraX; camera.position.y = cameraY; camera.position.z = cameraZ; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x004076, 0.0006); // moon var sphereGeometry = new THREE.SphereGeometry(100, 4, 4); var sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 10, emissive: 0xFFFFFF, emissiveIntensity: 3 }); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(0, 300, -2450); //-2500); scene.add(sphere); // lights var pointMoonColor = "#FCFFB4"; pointMoon = new THREE.PointLight(pointMoonColor, 1500, 300); pointMoon.position.set(0, 300, -2500); scene.add(pointMoon); // scene.add(new THREE.PointLightHelper(pointMoon, 1)); // ambient var ambiColor = "#0c0c0c"; var ambientLight = new THREE.AmbientLight(ambiColor); scene.add(ambientLight); // lights var pointAColor = "#FFA600"; pointA = new THREE.PointLight(pointAColor, 50, 1); pointA.position.set(0, 70, 0); scene.add(pointA); scene.add(new THREE.PointLightHelper(pointA, 1)); // right light var dirLightL = new THREE.DirectionalLight(0xffffff, 1); dirLightL.position.set(20, 0, 0); scene.add(dirLightL); // from behing var dirLightBehind = new THREE.DirectionalLight(0x004076, 10); dirLightBehind.position.set(0, 0, -500); scene.add(dirLightL); var cubeGeometry = new THREE.BoxGeometry(50, 50, 50); var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.y = 250; scene.add(cube); geometry = new THREE.PlaneGeometry(10000, 10000, worldWidth * 2 - 1, worldDepth * 2 - 1); geometry.rotateX(Math.PI / 2); //geometry.rotation.x = Math.PI/2; for (var i = 0, l = geometry.vertices.length; i < l; i++) { geometry.vertices[i].y = 5 * Math.sin(i / 4); } material = new THREE.MeshPhongMaterial({ color: 0x004076, shading: THREE.FlatShading, side: THREE.DoubleSide, shininess: 25, wireframe: false }); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // SKY // moons light var spotColor = "#BF93FF"; var spotLight = new THREE.SpotLight(spotColor); spotLight.angle = Math.PI; spotLight.position.set(0, 160, -2000); spotLight.distance = 5000; spotLight.intensity = 5; spotLight.castShadow = true; spotLight.shadowCameraVisible = true; spotLight.target = cube; scene.add(spotLight); renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x004076); //renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight); //container.innerHTML = ""; container.appendChild(renderer.domElement); stats = new Stats(); //container.appendChild( stats.dom ); // window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); // controls.handleResize(); } // function animate() { requestAnimationFrame(animate); render(); stats.update(); } function render() { var delta = clock.getDelta(), time = clock.getElapsedTime() * 10; for (var i = 0, l = geometry.vertices.length; i < l; i++) { geometry.vertices[ i ].y = 3 * Math.sin( i / 2 + ( time + i / 3 ) / 5 ); //geometry.vertices[i].y = 3 * Math.sin(i / 2 + (time + i * 0.5 / 5) / 8); } // spin sea mesh.rotation.y += 0.0005; mesh.geometry.verticesNeedUpdate = true; // controls.update( delta ); renderer.render(scene, camera); }
Expand for more options Login