搭积木css,Three.js + TweenMax.js交互式三维空间搭积木动画

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);