Three.js 皓月当空照的海面

海上生明月，天涯共此时。HTML5场景动画。 2016年度webgl作品候选！

Three.js, moon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 10497
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

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);

}

编译

CSS

HTML

海上生明月，天涯共此时。HTML5场景动画。 2016年度webgl作品候选！

Three.js, moon

编辑器支持Emmet

快捷键

海上生明月，天涯共此时。HTML5场景动画。 2016年度webgl作品候选！

Three.js, moon

Three.js 低多边形风格的3D海上生明月图

Three.js 梦幻感觉的曲面光影流转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：