多米诺波动

• 示例
• 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();

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！