JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var floor = Math.floor,
PI = Math.PI,
random = Math.random;
var internals = {};
internals.W = window.innerWidth;
internals.H = window.innerHeight;
internals.color = {
light: 0xFFFFFF
};
internals.colors = {
blue: 0x156289,
yellow: 0xFFBA5A,
red: 0xea7775,
orange: 0xFFA48F,
purple: 0x47318B
};
internals.config = {
columns: 14,
minRows: 5,
maxRows: 7,
minItemWidth: 1,
maxItemWidth: 30,
itemHeight: 3,
itemDepth: 1
};
internals.randomIntFromInterval = function(min, max) {
return (
floor(random() * (max - min + 1) + min));
};
internals.randomProperty = function(obj) {
var keys = Object.keys(obj);
return obj[keys[keys.length * random() << 0]];
};
// -------
internals.scene = new THREE.Scene();
internals.scene.background = new THREE.Color(internals.color.light);
internals.scene.fog = new THREE.Fog(internals.scene.background, 100, 500);
internals.camera = new THREE.PerspectiveCamera(45, internals.W / internals.H, 0.1, 1000);
internals.camera.position.set(-60, 10, 80);
internals.scene.add(internals.camera);
internals.renderer = new THREE.WebGLRenderer({
antialias: true
});
internals.renderer.setPixelRatio(window.devicePixelRatio);
internals.renderer.setSize(internals.W, internals.H);
internals.renderer.shadowMap.enabled = true;
internals.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
internals.renderer.gammaInput = true;
internals.renderer.gammaOutput = true;
document.body.appendChild(internals.renderer.domElement);
internals.controls = new THREE.OrbitControls(internals.camera, internals.renderer.domElement);
internals.controls.maxPolarAngle = PI / 2;
internals.controls.maxDistance = 500;
// -------
// lights
internals.lights = {};
internals.lights.ambient = new THREE.AmbientLight(internals.color.light);
internals.scene.add(internals.lights.ambient);
internals.lights.directional = new THREE.DirectionalLight(internals.color.light);
internals.lights.directional.position.set(-20, 50, 50);
internals.scene.add(internals.lights.directional);
internals.lights.pointFront = new THREE.PointLight(internals.colors.purple, 1);
internals.lights.pointFront.position.set(-20, 0, 20);
internals.lights.pointFront.castShadow = true;
internals.scene.add(internals.lights.pointFront);
internals.lights.pointBack = new THREE.PointLight(internals.colors.purple, 1);
internals.lights.pointBack.position.set(20, 0, -20);
internals.lights.pointBack.castShadow = true;
internals.scene.add(internals.lights.pointBack);
// floor
internals.floor = new THREE.Mesh(
new THREE.BoxBufferGeometry(100, 0.1, 100),
new THREE.MeshStandardMaterial({
color: internals.color.light
}));
internals.floor.receiveShadow = true;
internals.scene.add(internals.floor);
// -------
internals.itemsGroup = new THREE.Group();
var rows = void 0,
non = void 0,
item = void 0,
itemWidth = void 0,
itemHight = void 0,
itemDepth = void 0;
for (var i = 0; i < internals.config.columns; i++) {
rows = internals.randomIntFromInterval(internals.config.minRows, internals.config.maxRows);
non = i % 2;
for (var j = 0; j < rows; j++) {
itemWidth = internals.randomIntFromInterval(internals.config.minItemWidth, internals.config.maxItemWidth);
itemHight = internals.config.itemHeight;
itemDepth = internals.config.itemDepth;
if (non) {
itemDepth = itemWidth;
itemWidth = internals.config.itemDepth;
}
item = new THREE.Mesh(
new THREE.BoxBufferGeometry(itemWidth, itemHight, itemDepth),
new THREE.MeshStandardMaterial({
color: internals.randomProperty(internals.colors),
metalness: 0.25
}));
item.castShadow = true;
item.receiveShadow = true;
if (non) {
y = internals.config.itemHeight / 2 + i * internals.config.itemHeight;
z = ((j - rows + rows / 2) * 2 + 1) * 2;
item.position.set(z, y, 0);
} else {
y = internals.config.itemHeight / 2 + i * internals.config.itemHeight;
z = ((j - rows + rows / 2) * 2 + 1) * 2;
item.position.set(0, y, z);
}
internals.itemsGroup.add(item);
}
}
internals.itemsGroup.position.set(0, -internals.config.columns * internals.config.itemHeight / 2, 0);
internals.floor.position.set(0, -internals.config.columns * internals.config.itemHeight / 2, 0);
internals.scene.add(internals.itemsGroup);
// -------
internals.resizeHandler = function() {
internals.W = window.innerWidth;
internals.H = window.innerHeight;
internals.renderer.setSize(internals.W, internals.H);
internals.camera.aspect = internals.W / internals.H;
internals.camera.updateProjectionMatrix();
};
window.addEventListener('resize', internals.resizeHandler, false);
internals.render = function() {
return internals.renderer.render(internals.scene, internals.camera);
};
// -------
internals.itemsGroup.children.forEach(function(item) {
TweenMax.to(item.scale, internals.randomIntFromInterval(2, 6), {
y: 0,
z: 0,
x: 0,
ease: Expo.easeInOut,
delay: internals.randomIntFromInterval(0, 10),
repeat: Infinity,
yoyo: true
});
});
TweenMax.to(internals.itemsGroup.rotation, 10, {
y: PI * 2,
repeat: Infinity,
ease: Linear.easeNone
});
TweenLite.ticker.addEventListener('tick', internals.render);