Three.js 可调整大小的立方体矩阵 - 踏得网

Three.js+ramda.js zoom-able cube grid 里面包含一些基本的数学计算公式。

Three, cube

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
var $__0 = R,
    range = $__0.range,
    curry = $__0.curry,
    curryN = $__0.curryN;
var TAU = Math.PI * 2;
var PI = Math.PI;
var rad2deg = 180 / PI,
    deg2rad = PI / 180;
var sin1 = lib6.sin1,
    cos1 = lib6.cos1;
var SW = 640,
    SH = SW,
    aspectRatio = SW / SH,
    CAM_Z = 8;

function twn(msecs, fn) {
    var stop = false;
    var ret = new Promise((function(resolve, reject) {
        var t0 = +new Date();
        var tick = function() {
            var elapsed = +new Date() - t0;
            fn(elapsed / msecs);
            if (!stop && elapsed <= msecs) {
                requestAnimationFrame(tick);
            } else {
                resolve();
            }
        };
        tick();
    }));
    ret.stop = function() {
        stop = true;
    };
    return ret;
}

function twz(msecs, fn) {
    twn(msecs, (function(p) {
        return fn(p * p * (3 - 2 * p));
    }));
}
var mkCube = function(radius, color, emis) {
    emis = emis || 0;
    return new THREE.Mesh(new THREE.BoxGeometry(radius, radius, radius), new THREE.MeshPhongMaterial({
        color: color,
        emissive: emis
    }));
};
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, aspectRatio, 0.1, 11000);
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(SW, SH);
camera.position.set(0, 0, CAM_Z);
var objects = [];
var light = new THREE.AmbientLight(0x111111);
scene.add(light);

function mkPinkLight() {
    var l = new THREE.PointLight(0xff00cc, 1, 5);
    l.name = 'light';
    return l;
}
range(0, 6).map((function(j) {
    range(0, 6).map((function(i) {
        var c = mkCube(1, 0xffffff, 0);
        c.add(mkPinkLight());
        c.getObjectByName('light').intensity = 0;
        scene.add(c);
        c.position.x = -5 + i * 2;
        c.position.y = -5 + j * 2;
        objects.push(c);
    }));
}));

function emis(o, p) {
    var intensity = (255 * p);
    o.material.setValues({
        emissive: intensity << 16 | 0 | intensity
    });
    var light = o.getObjectByName('light');
    light.intensity = p * 4;
}
var INTERVAL = 333;
(function() {
    var n = 0;
    var r = (function() {
        return Math.random() * PI / 2 * 1.05;
    });
    setInterval(function() {
        var prev = objects[n];
        n = (n + 1) % objects.length;
        var next = objects[n];
        ((function(prev, next) {
            twz(INTERVAL, (function(p) {
                return emis(next, p);
            }));
            twz(INTERVAL - 1, (function(p) {
                return emis(prev, 1 - p);
            }));
        }))(prev, next);
    }, INTERVAL);
})();
lib6.Time.cycle(5000, (function(p) {
    objects.forEach(function(object, i) {
        var x = i % 6,
            y = Math.floor(i / 6);
        object.position.z = 0.5 * lib6.sin1(p + x / 6 + y / 6);
    });
    renderer.render(scene, camera);
}));
renderer.domElement.addEventListener('mousewheel', function(e) {
    camera.position.z += e.wheelDelta * 0.005;
});

编译

CSS

HTML