html5照片到处乱飞代码,Three.js 在太空中乱飞的立方块

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var gui = new dat.GUI();

var space = new Space();

function Space() {

this.ww = window.innerWidth;

this.wh = window.innerHeight;

this.numBoxes = 10;

this.boxDistance = 250;

this.numContainers = 8;

this.cx = 30;

this.cy = 30;

this.cz = 60;

this.cameraX = .25;

this.cameraY = .25;

this.lightX = .25;

this.lightY = .25;

this.lag = 2;

this.tunnelSpeed = 30;

this.cameraZ = 0;

this.lightZ = 0;

this.boxWidth = 50;

this.colorScheme = 'random';

this.colors = [

new THREE.Color('rgb(1,35,69)'),

new THREE.Color('rgb(18,52,86)'),

new THREE.Color('rgb(35,69,103)'),

new THREE.Color('rgb(52,86,120)'),

new THREE.Color('rgb(69,103,137)'),

new THREE.Color('rgb(86,120,144)'),

];

this.renderer;

this.scene;

this.camera;

this.light;

this.elements;

this.r = getRandomInt(255);

this.g = getRandomInt(255);

this.b = getRandomInt(255);

var _self = this;

this.init = function() {

/* WEBGL RENDERER */

this.renderer = new THREE.WebGLRenderer({

canvas: document.getElementById('scene')

});

this.renderer.setSize(this.ww, this.wh);

this.scene = new THREE.Scene();

this.camera = new THREE.PerspectiveCamera(50, this.ww / this.wh, 1, 10000);

this.scene.add(this.camera);

this.light = new THREE.PointLight(0xffffff, 1, 1300);

this.light.position.set(0, 0, this.lightZ);

this.scene.add(this.light);

document.addEventListener('mousemove', _getPageValues);

//console.log(this)

_self.elements = new THREE.Object3D();

for (var i = 0; i <= _self.numContainers; i++) _createBox(i, null);

_self.farest = -_self.numBoxes * _self.boxDistance;

_self.scene.add(_self.elements);

_animate();

};

_getPageValues = function(e) {

_self.cx = (_self.ww * .5) - e.pageX;

_self.cy = (_self.wh * .5) - e.pageY;

}

_createBox = function(i, $containerReference, $z) {

var $boxSize = getRandomInt(_self.boxWidth) + 1;

var $geometry = new THREE.BoxGeometry($boxSize, $boxSize, $boxSize);

var $translate = new THREE.Matrix4().makeTranslation(0, 0, 0);

var $container;

if ($containerReference == null) $container = new THREE.Object3D();

else $container = $containerReference;

var $color = _returnColor(i);

for (var j = 0; j < _self.numBoxes; j++) {

var $material = new THREE.MeshLambertMaterial({

color: $color

});

var $cube = new THREE.Mesh($geometry, $material);

var $rotation = new THREE.Matrix4().makeRotationZ(getRandomInt(360));

$cube.applyMatrix(new THREE.Matrix4().multiplyMatrices($rotation, $translate));

$cube.position.x = getRandomInt(_self.ww) - (_self.ww * .5);

$cube.position.y = getRandomInt(_self.wh) - (_self.wh * .5);

$container.add($cube);

}

if ($containerReference == null) {

$container.position.z = -i * _self.boxDistance;

_self.elements.add($container);

} else $container.position.z = $z;

};

_returnColor = function(i) {

var $color;

if (_self.colorScheme == 'random') {

_self.r = getRandomInt(255);

_self.g = getRandomInt(255);

_self.b = getRandomInt(255);

$color = "rgb(" + _self.r + "," + _self.g + "," + _self.b + ")";

} else if (_self.colorScheme == 'blue') {

$color = _self.colors[i % _self.colors.length]

} else {

_self.r += 3;

_self.g += 5;

_self.b++;

if (_self.r >= 256) _self.r = getRandomInt(255);

if (_self.g >= 256) _self.g = getRandomInt(255);

if (_self.b >= 256) _self.b = getRandomInt(255);

$color = "rgb(" + _self.r + "," + _self.g + "," + _self.b + ")";

}

console.log(_self.r + "," + _self.g + "," + _self.b)

return $color;

}

_animate = function() {

requestAnimationFrame(_animate);

for (var i = 0; i <= _self.numContainers; i++) {

var $container = _self.elements.children[i];

if (_self.camera.position.z <= $container.position.z) {

for (var j = 0; j < $container.children.length; j++) $container.remove($container.children[j]);

_self.farest -= _self.boxDistance;

_createBox(i, $container, _self.farest);

};

};

_self.cz -= _self.tunnelSpeed - Math.abs(_self.cy * .05);

TweenMax.to(_self.light.rotation, _self.lag, {

x: _self.cy * -.5,

y: _self.cx * -.5,

z: _self.cy * .1,

ease: Quint.easeOut

})

TweenMax.to(_self.light.position, _self.lag, {

z: _self.cz - _self.lightZ,

x: _self.cx * _self.lightX,

y: _self.cy * -_self.lightY,

ease: Quint.easeOut

})

TweenMax.to(_self.camera.position, _self.lag, {

z: _self.cz - _self.cameraZ,

x: _self.cx * _self.cameraX,

y: _self.cy * -_self.cameraY,

ease: Quint.easeOut

})

_self.renderer.render(_self.scene, _self.camera);

}

};

function getRandomInt($n) {

return Math.floor((Math.random() * $n) + 1);

}

space.init();

gui.add(space, 'tunnelSpeed', 10, 100);

gui.add(space, 'lag', 0, 5);

gui.add(space, 'lightX', 0, 1);

gui.add(space, 'lightY', 0, 1);

gui.add(space, 'lightZ', -2000, 2000);

gui.add(space, 'cameraX', 0, 1);

gui.add(space, 'cameraY', 0, 1);

gui.add(space, 'cameraZ', -2000, 2000);

gui.add(space, 'numBoxes', 3, 50).step(1);

gui.add(space, 'boxWidth', 1, 100);

gui.add(space, 'boxDistance', 10, 500);

gui.add(space, 'colorScheme', ['random', 'sequenced', 'blue']);