Three.js WebGL 宇宙空间太空迷失

Get lost into space

Three.js, space

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function getMat(color) {
    // our material is a phong material, with no shininess (highlight) and a black specular
    return new THREE.MeshStandardMaterial({
        color: color,
        roughness: .9,
        transparent: true,
        opacity: 0,
        emissive: 0x270000,
        shading: THREE.FlatShading
    });
}

var Colors = {
    red: 0xf85051,
    orange: 0xea8962,
    yellow: 0xdacf75,
    beige: 0xccc58f,
    grey: 0xbab7a1,
    blue: 0x4379a8,
    ocean: 0x4993a8,
    green: 0x24a99b
};

var colorsLength = Object.keys(Colors).length;

function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function getRandomColor() {
    var colIndx = Math.floor(Math.random() * colorsLength);
    var colorStr = Object.keys(Colors)[colIndx];
    return Colors[colorStr];
}

// Default parameters
var parameters = {
    minRadius: 30,
    maxRadius: 50,
    minSpeed: .015,
    maxSpeed: .025,
    particles: 500,
    minSize: .1,
    maxSize: 2
};

// For a THREEJS project we need at least
// a scene
// a renderer
// a camera
// a light (1 or many)
// a mesh (an object to display)

var scene, renderer, camera, light;
var stars = [];
var nbPlanetsMax = 4;
var planets = [];
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

// initialise the world
function initWorld() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, .1, 2000);
    camera.position.z = 100;

//
    // THE RENDERER
    //
    renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMap.enabled = true;

container = document.getElementById('universe');
    container.appendChild(renderer.domElement);

// Lights
    ambientLight = new THREE.AmbientLight(0x663344, 2);
    scene.add(ambientLight);

light = new THREE.DirectionalLight(0xffffff, 1.5);
    light.position.set(200, 100, 200);
    light.castShadow = true;
    light.shadow.camera.left = -400;
    light.shadow.camera.right = 400;
    light.shadow.camera.top = 400;
    light.shadow.camera.bottom = -400;
    light.shadow.camera.near = 1;
    light.shadow.camera.far = 1000;
    light.shadow.mapSize.width = 2048;
    light.shadow.mapSize.height = 2048;

scene.add(light);

//
    // HANDLE SCREEN RESIZE
    //
    window.addEventListener('resize', handleWindowResize, false);

// Creating firts planets
    for (var i = 0; i < nbPlanetsMax; i++) {
        planets.push(new Planet(-2000 / nbPlanetsMax * i - 500));
    }
    addStarts();
    loop();

}

function animateStars(z) {

// loop through each star
    for (var i = 0; i < stars.length; i++) {

star = stars[i];
        // if the particle is too close move it to the back
        if (star.position.z > z) star.position.z -= 2000;

}

function addStarts() {

for (var z = -2000; z < 0; z += 20) {

var geometry = new THREE.SphereGeometry(0.5, 32, 32)
        var material = new THREE.MeshBasicMaterial({
            color: 0xffffff
        });
        var sphere = new THREE.Mesh(geometry, material)

sphere.position.x = randomRange(-1 * Math.floor(WIDTH / 2), Math.floor(WIDTH / 2));
        sphere.position.y = randomRange(-1 * Math.floor(HEIGHT / 2), Math.floor(HEIGHT / 2));

// Then set the z position to where it is in the loop (distance of camera)
        sphere.position.z = z;

// scale it up a bit
        sphere.scale.x = sphere.scale.y = 2;

//add the sphere to the scene
        scene.add(sphere);

//finally push it to the stars array
        stars.push(sphere);
    }
}

var Planet = function(z) {
    // the geometry of the planet is a tetrahedron
    this.planetRadius = randomRange(12, 30);
    var planetDetail = randomRange(2, 3);
    var geomPlanet = new THREE.TetrahedronGeometry(this.planetRadius, planetDetail);

var noise = randomRange(1, 5);
    for (var i = 0; i < geomPlanet.vertices.length; i++) {
        var v = geomPlanet.vertices[i];
        v.x += -noise / 2 + Math.random() * noise;
        v.y += -noise / 2 + Math.random() * noise;
        v.z += -noise / 2 + Math.random() * noise;
    }

// create a new material for the planet
    var color = getRandomColor();
    var matPlanet = getMat(color);
    // create the mesh of the planet
    this.planet = new THREE.Mesh(geomPlanet, matPlanet);

this.ring = new THREE.Mesh();
    this.nParticles = 0;

// create the particles to populate the ring
    this.updateParticlesCount();

// Create a global mesh to hold the planet and the ring
    this.mesh = new THREE.Object3D();
    this.mesh.add(this.planet);
    this.mesh.add(this.ring);

this.planet.castShadow = true;
    this.planet.receiveShadow = true;

// update the position of the particles => must be moved to the loop
    this.mesh.rotation.x = (Math.random() * 2 - 1) * 2 * Math.PI;
    this.mesh.rotation.z = (Math.random() * 2 - 1) * 2 * Math.PI;

var posX = randomRange(-1 * Math.floor(WIDTH / 4), Math.floor(WIDTH / 4));
    var posY = randomRange(-1 * Math.floor(HEIGHT / 4), Math.floor(HEIGHT / 4));
    posX = shiftPosition(posX, this.planetRadius);
    posY = shiftPosition(posY, this.planetRadius);

this.mesh.position.set(posX, posY, z);
    scene.add(this.mesh);
}
Planet.prototype.destroy = function() {
    scene.remove(this.mesh);
}
Planet.prototype.updateParticlesCount = function() {
    var parameters = {
        minRadius: randomRange(this.planetRadius + 10, 60),
        maxRadius: randomRange(40, 70),
        minSpeed: randomRange(0, 5) * 0.1 + randomRange(0, 9) * 0.01,
        maxSpeed: randomRange(0, 5) * 0.1 + randomRange(0, 9) * 0.01,
        particles: randomRange(0, 1) * randomRange(20, 30),
        minSize: randomRange(1, 3) + randomRange(0, 9) * 0.1,
        maxSize: randomRange(1, 3) + randomRange(0, 9) * 0.1
    };

if (this.nParticles < parameters.particles) {
        // Remove particles
        for (var i = this.nParticles; i < parameters.particles; i++) {
            var p = new Particle();
            p.mesh.rotation.x = Math.random() * Math.PI;
            p.mesh.rotation.y = Math.random() * Math.PI;
            p.mesh.position.y = -2 + Math.random() * 4;
            this.ring.add(p.mesh);
        }
    } else {
        // add particles
        while (this.nParticles > parameters.particles) {
            var m = this.ring.children[this.nParticles - 1];
            this.ring.remove(m);
            m.userData.po = null;
            this.nParticles--;
        }
    }
    this.nParticles = parameters.particles;

// We will give a specific angle to each particle
    // to cover the whole ring we need to
    // dispatch them regularly
    this.angleStep = Math.PI * 2 / this.nParticles;
    this.updateParticlesDefiniton();
}

// Update particles definition
Planet.prototype.updateParticlesDefiniton = function() {

for (var i = 0; i < this.nParticles; i++) {
        var m = this.ring.children[i];
        var s = parameters.minSize + Math.random() * (parameters.maxSize - parameters.minSize);
        m.scale.set(s, s, s);

// set a random distance
        m.userData.distance = parameters.minRadius + Math.random() * (parameters.maxRadius - parameters.minRadius);

// give a unique angle to each particle
        m.userData.angle = this.angleStep * i;
        // set a speed proportionally to the distance
        m.userData.angularSpeed = rule3(m.userData.distance, parameters.minRadius, parameters.maxRadius, parameters.minSpeed, parameters.maxSpeed);
    }
}

var Particle = function() {
    // Size of the particle, make it random
    var s = 1;

// geometry of the particle, choose between different shapes
    var geom,
        random = Math.random();

if (random < .25) {
        // Cube
        geom = new THREE.BoxGeometry(s, s, s);

} else if (random < .5) {
        // Pyramid
        geom = new THREE.CylinderGeometry(0, s, s * 2, 4, 1);

} else if (random < .75) {
        // potato shape
        geom = new THREE.TetrahedronGeometry(s, 2);

} else {
        // thick plane
        geom = new THREE.BoxGeometry(s / 6, s, s); // thick plane
    }
    // color of the particle, make it random and get a material
    var color = getRandomColor();
    var mat = getMat(color);

// create the mesh of the particle
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
    this.mesh.userData.po = this;
}

// Update particles position
Planet.prototype.updateParticlesRotation = function() {

// increase the rotation of each particle
    // and update its position

for (var i = 0; i < this.nParticles; i++) {
        var m = this.ring.children[i];
        // increase the rotation angle around the planet
        m.userData.angle += m.userData.angularSpeed;

// calculate the new position
        var posX = Math.cos(m.userData.angle) * m.userData.distance;
        var posZ = Math.sin(m.userData.angle) * m.userData.distance;
        m.position.x = posX;
        m.position.z = posZ;

//*
        // add a local rotation to the particle
        m.rotation.x += Math.random() * .05;
        m.rotation.y += Math.random() * .05;
        m.rotation.z += Math.random() * .05;
        //*/
    }
}

function addPlanet(z) {
    planets.push(new Planet(z));
}

function loop() {
    var horizon = -2000 + camera.position.z;
    for (var i = 0; i < planets.length; i++) {
        if (planets[i].mesh.position.z > camera.position.z) {
            planets[i].destroy();
            planets.splice(i, 1);
        }

// If the planet is arriving
        if (planets[i].mesh.position.z > horizon && planets[i].planet.material.opacity < 1) {
            planets[i].planet.material.opacity += 0.005;
            for (var j = 0; j < planets[i].mesh.children[1].children.length; j++) {
                planets[i].mesh.children[1].children[j].material.opacity += 0.005;
            }
        }
    }

// Adding stars
    animateStars(camera.position.z);

if (planets.length < nbPlanetsMax) {
        addPlanet(camera.position.z - 2000);
    }

for (var i = 0; i < planets.length; i++) {
        planets[i].planet.rotation.y -= 0.01;
        planets[i].updateParticlesRotation();
    }

camera.position.z -= 3;

//
    // RENDER !
    //
    renderer.render(scene, camera);

//
    // REQUEST A NEW FRAME
    //
    requestAnimationFrame(loop);
}

function handleWindowResize() {
    // Recalculate Width and Height as they had changed
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;

// Update the renderer and the camera
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
}

initWorld();

function rule3(v, vmin, vmax, tmin, tmax) {
    var nv = Math.max(Math.min(v, vmax), vmin);
    var dv = vmax - vmin;
    var pc = (nv - vmin) / dv;
    var dt = tmax - tmin;
    var tv = tmin + (pc * dt);
    return tv;

}

编译

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
body {
    background: linear-gradient(180deg, #373773, #235689, #2a9096, #364a7b, #4a367b, #5e3665, #2c294b, #31437a);
    background-size: 1600% 1600%;
    -webkit-animation: skygradient 180s ease infinite;
    -moz-animation: skygradient 180s ease infinite;
    -o-animation: skygradient 180s ease infinite;
    animation: skygradient 180s ease infinite;
}
@-webkit-keyframes skygradient {
    0% {
        background-position: 50% 0%
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 50% 0%
    }
}
@-moz-keyframes skygradient {
    0% {
        background-position: 50% 0%
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 50% 0%
    }
}
@-o-keyframes skygradient {
    0% {
        background-position: 50% 0%
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 50% 0%
    }
}
@keyframes skygradient {
    0% {
        background-position: 50% 0%
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 50% 0%
    }
}
canvas {
    width: 100%!important;
    height: 100%!important;
}

HTML

Get lost into space

Three.js, space

编辑器支持Emmet

快捷键

Get lost into space

Three.js, space

WebGL Three.js三维宇宙空间旋转背景动画

WebGL Three.js宇宙中心模拟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：