HTML5 Three.js 随机3D星系系统生成器

Random Solar System Generator

html5, solar, planet

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 99999999);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var oControls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff, 0.4))
    //Create elements here:
function createCanvasMaterial(color, size) {
    var matCanvas = document.createElement('canvas');
    matCanvas.width = matCanvas.height = size;
    var matContext = matCanvas.getContext('2d');
    // create exture object from canvas.
    var texture = new THREE.Texture(matCanvas);
    // Draw a circle
    var center = size / 2;
    matContext.beginPath();
    matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
    matContext.closePath();
    matContext.fillStyle = color;
    matContext.fill();
    // need to set needsUpdate
    texture.needsUpdate = true;
    // return a texture made from the canvas
    return texture;
}

function deg(i) {
    return i * Math.PI / 180
}

function RGB(r, g, b) {
    function colorcheck(c) {
        if (c > 255) {
            c = 255
        }
        if (c < 0) {
            c = 0
        }
        return c
    }
    r = colorcheck(r)
    g = colorcheck(g)
    b = colorcheck(b)
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}

function rotateAround(point, center, angle) {
    angle = (angle) * (Math.PI / 180); // Convert to radians
    var rotatedX = Math.cos(angle) * (point.x - center.x) -
        Math.sin(angle) * (point.y - center.y) +
        center.x;
    var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;
    return {
        x: rotatedX,
        y: rotatedY
    }
}

function rotateAround3d(point, center, angle) {
    angle = (angle) * (Math.PI / 180); // Convert to radians
    var rotatedX = Math.cos(angle) * (point.x - center.x) -
        Math.sin(angle) * (point.y - center.y) +
        center.x;
    var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;
    return {
        x: rotatedX,
        y: rotatedY
    }
}

function rgb2color(r, g, b) {
    return dec2hex(rgb2hex(RGB(r, g, b)))
}

function dec2hex(i) {
    var result = "0x"
    result = result + i.slice(1)
    return result
}

function randint(min, max) {
    return Math.floor(Math.random() * max) + min
}

function randoffset(num, off) {
        return randint(num - off, off * 2)
    }
    //three.js adding objects:
var light = new THREE.PointLight('yellow', 3, 3000);
light.position.set(0, 0, 0);
scene.add(light);
var geometry = new THREE.TetrahedronGeometry(200, 5);
var c = 0
console.log(255 / geometry.faces.length)
for (var i = 0; i < geometry.faces.length; i++) {

var face = geometry.faces[i];
    color = rgb2color(255, randint(0, 150), 0)
    c += 255 / geometry.faces.length
        //console.log(c)
    face.color.setHex(color);

}
var noise = 5
for (var i = 0; i < geometry.vertices.length; i++) {
    var v = geometry.vertices[i];
    v.x += -noise / 2 + Math.random() * noise;
    v.y += -noise / 2 + Math.random() * noise;
    v.z += -noise / 2 + Math.random() * noise;
}
var sun = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    vertexColors: THREE.FaceColors
}));
/*
                         
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sun = new THREE.Mesh( geometry, material );
*/
scene.add(sun);

face.colorChoice = colorChoice
        face2.colorChoice = colorChoice;
    }
    gr.mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
        vertexColors: THREE.FaceColors
    }));
    /*
    var material = new THREE.MeshPhongMaterial({color: RGB(gr.color.r, gr.color.g, gr.color.b)})
    gr.mesh = new THREE.Mesh( geometry, material);
    */
    gr.mesh.position.z = dfc
    point = {
        x: gr.mesh.position.x,
        y: gr.mesh.position.z
    }
    center = {
        x: 0,
        y: 0
    }
    r = rotateAround(point, center, randint(0, 360))
    gr.mesh.position.x = r.x
    gr.mesh.position.z = r.y
        //rotation
    gr.axisRotation = randoffset(20, 10)
    gr.mesh.rotation.x = deg(gr.axisRotation)
    gr.mesh.rotation.z = deg(gr.axisRotation)
    scene.add(gr.mesh)
    if (isGas) {
        gr.isRing = Math.random() >= 0.3
    }
    if (gr.isRing) {
        gr.ring = {}
        gr.ring.count = 150,
            gr.ring.particles = new THREE.Geometry(),
            gr.ring.material = new THREE.PointsMaterial({
                size: 10,
                map: createCanvasMaterial(rgb2hex(RGB(randint(0, 255), randint(0, 255), randint(0, 255))), 256),
                transparent: true,
                depthWrite: false
            });

// now create the individual particles
        for (var p = 0; p < gr.ring.count; p++) {

// create a particle with random
            var pX = randoffset(size * 1.5, 10),
                pY = randoffset(0, 10),
                pZ = 0
            point = {
                x: pX,
                y: 0
            }
            center = {
                x: 0,
                y: 0
            }
            r = rotateAround(point, center, randint(0, 360))
            pX = r.x
            pY = r.y
            var particle = new THREE.Vector3(pX, pY, pZ)

// add it to the geometry
            gr.ring.particles.vertices.push(particle);
            gr.ring.rdeg = randint(25, 50) / 100
        }

// create the particle system
        gr.ring.system = new THREE.Points(
            gr.ring.particles,
            gr.ring.material);

// add it to the scene
        scene.add(gr.ring.system);
        gr.ring.system.rotation.x = deg(randint(0, 360))
        gr.ring.system.rotation.y = deg(randint(0, 360))
    } else {
        gr.moonCount = randint(0, 10)
        gr.moons = []
        for (var i = 0; i < gr.moonCount; i++) {
            gr.moons.push(newMoon(gr.size, gr.mesh.position, dfc, gr.moonCount))
        }
    }
    return gr
}

var astCount = 600,
    asteroids = new THREE.Geometry(),
    aMaterial = new THREE.PointsMaterial({
        size: 10,
        map: createCanvasMaterial('#' + 808080, 256),
        transparent: true,
        depthWrite: false
    });

// now create the individual particles
for (var p = 0; p < astCount; p++) {

// create a particle with random
    var pX = randoffset(astDist, 20),
        pY = randoffset(0, 20),
        pZ = 0
    point = {
        x: pX,
        y: 0
    }
    center = {
        x: 0,
        y: 0
    }
    r = rotateAround(point, center, randint(0, 360))
    pX = r.x
    pZ = r.y
    var particle = new THREE.Vector3(pX, pY, pZ)

// add it to the geometry
    asteroids.vertices.push(particle);
}

// create the particle system
var astSystem = new THREE.Points(
    asteroids,
    aMaterial);

// add it to the scene
scene.add(astSystem);

//star particle system
var starCount = 500,
    stars = new THREE.Geometry(),
    sMaterial = new THREE.PointsMaterial({
        color: 0xFFFFFF,
        size: 40
    });

// now create the individual particles
for (var p = 0; p < starCount; p++) {

// create a particle with random
    var pX = randint(5000, 5000),
        pY,
        pZ
    point = {
        x: pX,
        y: 0
    }
    center = {
        x: 0,
        y: 0
    }
    r = rotateAround(point, center, randint(0, 360))
    pX = r.x
    pY = r.y
    point = {
        x: pX,
        y: 0
    }
    center = {
        x: 0,
        y: 0
    }
    r = rotateAround(point, center, randint(0, 360))
    pX = r.x
    pZ = r.y
    var particle = new THREE.Vector3(pX, pY, pZ)

// add it to the geometry
    stars.vertices.push(particle);
}

// create the particle system
var starSystem = new THREE.Points(
    stars,
    sMaterial);

// add it to the scene
scene.add(starSystem);
//end of elements
camera.position.x = 2000;
camera.position.y = 500
camera.position.z = 0;
lookAt = new THREE.Vector3(0, 0, 0)
camera.lookAt(lookAt)
oControls.target.set(0, 0, 0);
oControls.enablePan = false;
oControls.minDistance = 300;
oControls.maxDistance = 5000;
oControls.update()
var render = function() {
    requestAnimationFrame(render);
    mainloop()
    renderer.render(scene, camera);
};

function sunrotate(p) {
    var rdeg = 100 / (p.dfc + 30 - mindfc)
    rdeg /= 3
    point = {
        x: p.mesh.position.x,
        y: p.mesh.position.z
    }
    center = {
        x: 0,
        y: 0
    }
    r = rotateAround(point, center, rdeg)
    p.mesh.position.x = r.x
    p.mesh.position.z = r.y
    point = {
        x: p.mesh.position.x,
        y: p.mesh.position.y
    }
    r = rotateAround(point, center, (rdeg / Math.PI) / 2)
    p.mesh.position.x = r.x
    p.mesh.position.y = r.y
    return p
}

function mainloop() {
    for (var i = 0; i < planets.length; i++) {

planet = planets[i]
        planet = sunrotate(planet)
        planet.mesh.rotation.y += deg(1)
        if (planet.isRing) {
            planet.ring.system.rotation.z -= deg(planet.ring.rdeg)
            planet.ring.system.position.x = planet.mesh.position.x
            planet.ring.system.position.y = planet.mesh.position.y
            planet.ring.system.position.z = planet.mesh.position.z
        } else {
            for (var l = 0; l < planet.moons.length; l++) {
                moon = planet.moons[l]
                moon = sunrotate(moon)
                point = {
                    x: moon.mesh.position.x,
                    y: moon.mesh.position.z
                }
                center = {
                    x: planet.mesh.position.x,
                    y: planet.mesh.position.z
                }
                r = rotateAround(point, center, moon.rdeg)
                moon.mesh.position.x = r.x
                moon.mesh.position.z = r.y

point = {
                    x: moon.mesh.position.x,
                    y: moon.mesh.position.y
                }
                center = {
                    x: planet.mesh.position.x,
                    y: planet.mesh.position.y
                }
                r = rotateAround(point, center, moon.rang)
                moon.mesh.position.x = r.x
                moon.mesh.position.y = r.y
                moon.mesh.rotation.x += deg(1)
                moon.mesh.rotation.y += deg(1)
            }
        }
    }
    astSystem.rotation.y -= deg(0.05)
}
render();

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

编译

CSS

HTML

Random Solar System Generator

html5, solar, planet

编辑器支持Emmet

快捷键

Random Solar System Generator

html5, solar, planet

HTML5/Three.js金星的3D展示图

Fabric.js + Lodash.js 实现的随机盆景图生成器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：