技術標籤：# 動態構件波動

多米諾波動

• 示例
• HTML
• CSS
• JS

示例

HTML

<div class="wrapper">

		
	</div>
	<footer id="footer">
		Made with love by <a target="_blank" href="https://twitter.com/QuentinHocde">Quentin Hocdé</a> 
	</footer
 
>

CSS

@import "lesshat";

body{
  overflow:hidden;
}

*{
	margin:0;
	padding:0;
	border:0;
}

#footer{
	color:#1E90FF ;
	font-family: 'Lato';
	font-size: 14px;
	padding:10px;
	position: absolute;
	bottom: 0;left: 0;right: 0;
	z-index:100;
	a{
		color:white;
		font-family: 'Lato';
    font-style:
 
italic;
    text-decoration:none;
    font-weight:700;
    margin:0 5px;
	}

}

JS

function threejs() {
	this.shapeX = 0.5;
	this.shapeY = 100;
	this.shapeZ = 100;
	this.shapeColor = 0x1E90FF;
}

threejs.prototype.init = function init() {
	this.scene = new THREE.Scene();
	this.camera();
	this.renderer();
	this
 
.light();
	this.floor();

	this.initShape();

	this.render();
};

threejs.prototype.camera = function camera() {
	this.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 5000 );
	this.camera.position.y = 500;
	this.camera.position.z = 500;
	this.camera.position.x = 500;
	this.camera.updateProjectionMatrix();
	this.camera.lookAt(this.scene.position);
};

threejs.prototype.renderer = function renderer() {
	this.renderer = new THREE.WebGLRenderer({antialias: true});
	this.renderer.setSize( window.innerWidth, window.innerHeight );
	this.renderer.setClearColor( 0x1E90FF, 1 );
	this.renderer.shadowMapEnabled = true;
	this.renderer.shadowMapType = THREE.PCFSoftShadowMap;
	document.body.appendChild(this.renderer.domElement);
};

threejs.prototype.light = function light() {
	var shadowlight = new THREE.DirectionalLight( 0x1E90FF, 0.20 );
	shadowlight.position.set( 0, 1000, 0 );
	shadowlight.castShadow = true;
	shadowlight.shadowDarkness = 0.1;
	this.scene.add(shadowlight);

	var light = new THREE.DirectionalLight( 0xFFD700, 1.2 );
	light.position.set( 60, 100, 20 );
	this.scene.add(light);

};

threejs.prototype.floor = function floor() {
 	var geometry = new THREE.PlaneGeometry( 10000, 10000, 1, 1 );
	var material = new THREE.MeshBasicMaterial( { color: 0x202020 } );
	this.floor = new THREE.Mesh( geometry, material );
	this.floor.material.side = THREE.DoubleSide;
	this.floor.position.y =-150;
	this.floor.position.x =-1000;
	this.floor.rotation.x = 90*Math.PI/180;
	this.floor.rotation.y = 0;
	this.floor.rotation.z = 0;
	this.floor.doubleSided = true;
  this.floor.receiveShadow = true;
	this.scene.add(this.floor);
};


threejs.prototype.initShape = function initShape() {
	this.myArray = new THREE.Group();
  
	this.scene.add(this.myArray);

		this.geometry = new THREE.BoxGeometry( 10, 70, 100 );
		this.material = new THREE.MeshLambertMaterial({color : 0xFFD700, shading: THREE.FlatShading});

  
  for(var i = 0; i<100 ; i++){
    this.layer = new THREE.Group();
     
    this.shape = new THREE.Mesh(this.geometry, this.material);
		//this.shape.rotation.y = -Math.PI/4;
    this.shape.position.x = -1500 + (i*30);
    this.shape.position.y = -120;
		this.shape.castShadow = true;
		this.shape.receiveShadow = false;
    
    this.layer.add(this.shape);
    this.scene.add(this.layer);
    
    this.tl = new TimelineMax({repeat:-1,  delay: i*0.05, repeatDelay: 1});
    this.tl.to(this.shape.position, 0.5 ,{
        y: 0,
        ease:Power1.easeInOut
    });
     this.tl.to(this.shape.position, 0.5 ,{
        y: -120,
        ease:Power1.easeInOut
    });
  }
  


	

};

threejs.prototype.render = function render() {
	requestAnimationFrame(this.render.bind(this));
	this.renderer.render(this.scene, this.camera);
};

var shape = new threejs();
shape.init();