ThreeCanvas.js雪花飘落3D动画js特效

最新推荐文章于 2025-02-06 20:00:32 发布

转载最新推荐文章于 2025-02-06 20:00:32 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/12969

文章标签：

#javascript #3d #动画

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript库Three.js来创建一个粒子系统。通过定义窗口大小，设置相机，场景，渲染器，以及粒子材质，作者展示了如何初始化和更新粒子的位置，以响应鼠标移动或触摸事件。此外，还提供了粒子图像的加载和粒子对象的创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

引用js文件 JS调用var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var container;var particle;var camera;var scene;var renderer;var mouseX = 0;var mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var particles = []; var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );particleImage.src = "imgs/ParticleSmoke.png"; function init() { container = document.Element("div"); document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); scene.add(camera); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } ); for (var i = 0; i < 500; i++) { particle = new Particle3D( material); particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; particle.scale.x = particle.scale.y = 1; scene.add( particle ); particles.push(particle); } container.appendChild( renderer.domElement ); document.addEventListener( "mousemove", onDocumentMouseMove, false ); document.addEventListener( "touchstart", onDocumentTouchStart, false ); document.addEventListener( "touchmove", onDocumentTouchMove, false ); setInterval( loop, 1000 / 60 ); }function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY;}function onDocumentTouchStart( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; }}function onDocumentTouchMove( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; }}//function loop() {for(var i = 0; i1000) x-=2000; else if(x<-1000) x+=2000; if(z>1000) z-=2000; else if(z<-1000) z+=2000; } } camera.position.x += ( mouseX - camera.position.x ) * 0.05; camera.position.y += ( - mouseY - camera.position.y ) * 0.05; camera.lookAt(scene.position); renderer.render( scene, camera ); };>

dd: