下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!DOCTYPE html> <html lang="en"> <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <title>aznyj.com</title> <Meta charset="utf-8"> <Meta name="author" content="GC - [email protected]" /> <style> body { background-color: #f4f4f4; margin: 0px; overflow: hidden; } .LoR { height:205px; width:164px; overflow:hidden; background: url(GC/logo.png) 0 0 no-repeat; position:absolute; top:50%; left:50%; margin:-102px auto auto -82px; z-index:2; } </style> <script src="GC/three.min.js"></script> </head> <body> <script> var container; var camera,scene,projector,renderer; var PI2 = Math.PI * 2; var programFill = function ( context ) { context.beginPath(); context.arc( 0,1,PI2,true ); context.closePath(); context.fill(); } var programstroke = function ( context ) { context.linewidth = 0.05; context.beginPath(); context.arc( 0,true ); context.closePath(); context.stroke(); } var mouse = { x: 0,y: 0 },INTERSECTED; init(); animate(); function init() { container = document.createElement( 'div' ); container.id = 'bgc'; container.style.position = 'relative'; container.style.zIndex = '0'; document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 70,window.innerWidth / window.innerHeight,10000 ); camera.position.set( 0,300,500 ); scene = new THREE.Scene(); for ( var i = 0; i < 100; i ++ ) { var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808080 + 0x808080,program: programstroke } ) ); particle.position.x = Math.random() * 800 - 400; particle.position.y = Math.random() * 800 - 400; particle.position.z = Math.random() * 800 - 400; particle.scale.x = particle.scale.y = Math.random() * 10 + 10; scene.add( particle ); } projector = new THREE.Projector(); renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth,window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove',onDocumentMouseMove,false ); // window.addEventListener( 'resize',onWindowResize,false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth,window.innerHeight ); } function onDocumentMouseMove( event ) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } // function animate() { requestAnimationFrame( animate ); render(); } var radius = 600; var theta = 0; function render() { // rotate camera theta += 0.2; camera.position.x = radius * Math.sin( theta * Math.PI / 360 ); camera.position.y = radius * Math.sin( theta * Math.PI / 360 ); camera.position.z = radius * Math.cos( theta * Math.PI / 360 ); camera.lookAt( scene.position ); // find intersections camera.updateMatrixWorld(); var vector = new THREE.Vector3( mouse.x,mouse.y,0.5 ); projector.unprojectVector( vector,camera ); var ray = new THREE.Ray( camera.position,vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( scene.children ); if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.program = programstroke; INTERSECTED = intersects[ 0 ].object; INTERSECTED.material.program = programFill; } } else { if ( INTERSECTED ) INTERSECTED.material.program = programstroke; INTERSECTED = null; } renderer.render( scene,camera ); } </script> <div class="LoR"></div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。