首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML5兑现的多边形球体自转效果源码

2012-09-25 
HTML5实现的多边形球体自转效果源码!DOCTYPE htmlhtmlheadmeta charsetutf-8stylebody {back

HTML5实现的多边形球体自转效果源码

<!DOCTYPE html><html><head><meta charset="utf-8"><style>body {background-color: #ffffff;margin: 0;overflow: hidden;}</style></head><body><script src="http://mrdoob.github.com/three.js/build/three.min.js"></script><script>// workaround for chrome bug: http://code.google.com/p/chromium/issues/detail?id=35980#c12if ( window.innerWidth === 0 ) { window.innerWidth = parent.innerWidth; window.innerHeight = parent.innerHeight; }var camera, scene, renderer;var geometry, material, mesh;init();animate();function init() {camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );camera.position.z = 500;scene = new THREE.Scene();geometry = new THREE.IcosahedronGeometry( 200, 1 );material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2 } );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );renderer = new THREE.CanvasRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );}function animate() {requestAnimationFrame( animate );mesh.rotation.x = Date.now() * 0.0005;mesh.rotation.y = Date.now() * 0.001;renderer.render( scene, camera );}</script></body></html>


 

热点排行