示例

HTML

<div id="container"></div>
<!-- Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://unpkg.com/three@0.85.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.85.0/examples/js/Detector.js"></script>
<script src="https://unpkg.com/three@0.85.0/examples/js/libs/stats.min.js"></script>
<script src="https://unpkg.com/three@0.85.0/examples/js/controls/TrackballControls.js"></script>

CSS

*{margin: 0;padding: 0;overflow: hidden;
}

JS

console.clear();if ( ! Detector.webgl ) Detector.addGetWebGLMessage();var w = window.innerWidth;
var h = window.innerHeight;
var container, stats;
var camera, controls, scene, renderer, boxes = [];init();
animate();function init() {// rendererrenderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( w, h );container = document.getElementById( 'container' );container.appendChild( renderer.domElement );stats = new Stats();container.appendChild( stats.dom );stats.dom.style.position = 'absolute';// cameracamera = new THREE.PerspectiveCamera( 60, w / h, 1, 1000 );camera.animAngle = 0;camera.position.x = Math.cos( camera.animAngle ) * 400;camera.position.y = 180;camera.position.z = Math.sin( camera.animAngle ) * 400;// worldscene = new THREE.Scene();scene.fog = new THREE.FogExp2( 0xFFD700, 0.002 );renderer.setClearColor( scene.fog.color );// helpersvar gridXZ = new THREE.GridHelper( 600, 10 );scene.add( gridXZ );// lightsvar light = new THREE.DirectionalLight( 0xffffff );light.position.set( 1, 1, 1 );scene.add( light );light = new THREE.DirectionalLight( 0x002288 );light.position.set( -1, -1, -1 );scene.add( light );light = new THREE.AmbientLight( 0x222222 );scene.add( light );// Domevar domeGeometry = new THREE.IcosahedronGeometry( 700, 1 );var domeMaterial =  new THREE.MeshPhongMaterial( {color: 0xfb3550,shading: THREE.FlatShading,side: THREE.BackSide} );var dome = new THREE.Mesh( domeGeometry, domeMaterial );scene.add( dome );var planeGeometry = new THREE.PlaneGeometry( 600, 600 );var planeMaterial =  new THREE.MeshPhongMaterial( {color: 0x222A38,transparent: true,opacity: 0.8,shading: THREE.FlatShading,side: THREE.DoubleSide} );var plane = new THREE.Mesh( planeGeometry, planeMaterial );plane.rotation.x = Math.PI / 2;scene.add(plane);// box// BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)var geometry = new THREE.BoxGeometry( 10, 10, 10 );for( var i = 0; i < 100; i ++ ){var material = new THREE.MeshPhongMaterial({color: [0xfb3550,0xffffff,0x000000][Math.random()*3
|0],shading: THREE.FlatShading});boxes.push( new THREE.Mesh( geometry, material ) );scene.add( boxes[ i ] );}window.addEventListener( 'resize', onWindowResize, false );( function grow(){boxes.forEach( box => {var t = Math.random() * 0.6 + 0.3;TweenMax.to( box.scale, t, {x: 1 + Math.random() * 3,y: 1 + Math.random() * 20 + ( Math.random() < 0.1 ? 15 : 0 ),z: 1 + Math.random() * 3,ease: Power2.easeInOut} );TweenMax.to( box.position, t, {x: -200 + Math.random() * 400,z: -200 + Math.random() * 400,ease: Power2.easeInOut} );} );TweenMax.to( camera, 1.5, {animAngle: camera.animAngle + ( 2 * Math.random() - 1 ) * Math.PI,ease: Power1.easeInOut,onUpdate: function(){camera.position.x = Math.cos( camera.animAngle ) * 440;camera.position.z = Math.sin( camera.animAngle ) * 440;camera.updateProjectionMatrix();camera.lookAt( scene.position );                }} );TweenMax.to( window, 3.5, {onComplete: grow } );} )();
}function onWindowResize() {w = window.innerWidth;h = window.innerHeight;camera.aspect = w / h;camera.updateProjectionMatrix();renderer.setSize( w, h );
}function animate() {requestAnimationFrame( animate );renderer.render( scene, camera );stats.update();
}

TweenMax特效相关推荐

html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 const le ...
js 图片打碎_html5 tweenmax.js打碎玻璃图片轮播切换特效
特效描述:html5 tweenmax.js 打碎玻璃图片轮播切换特效.html5碎玻璃图片切换特效,tweenmax.js实列代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 co ...
HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法在页面中引入jquery和TweenMax.js的 ...
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览源码下载实现代码: html代码: & ...
Html5 canvas创意特效合集
Canvas就像一块画布,我们可以通过调用脚本在Canvas上绘制任意形状,甚至是制作动画.本文就是收集了很多非常富有创意的一些canvas动画特效例子,这些例子都非常适合大家学习. 1.3D篝火动画 ...
程序员也可以很浪漫，精选10个圣诞节特效网页设计-前端HTML+CSS等实现
最近离圣诞节不远了.整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家.直接上效果吧. html5基于svg绘制调皮圣诞老人: <![CDATA[ @import url('https ...
分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...

TweenMax特效

TweenMax特效

示例

HTML

CSS

JS

TweenMax特效相关推荐

最新文章

热门文章