three.js 笑脸雨

tech2023-06-22 110

思路：加载纹理贴图，批量创建精灵模型，然后随机生成。下落到指定位置就重新生成

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>笑脸雨</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style>  <script src="../../js/three.js"></script> <script src="../../js/OrbitControls.js"></script>  </head> <body> <script type="text/javascript"> var scene,camera,renderer, light,group; init();//开始初始化 //将需要初始化的放在该方法中统一初始化 function init(){ initScene();//初始化场景 initCamera();//初始化相机 initRenender();//初始化渲染器 initLight();//初始化光线 initOthers();//初始化其他参数 setWindown();//窗体的设置 initaxisHelper();//辅助坐标 yu(); } //初始化场景 function initScene(){ scene = new THREE.Scene();//创建场景 } //初始化相机 function initCamera(){ //创建一个摄像机对象 // camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000); // camera.position.z=3;//设置相机的位置 //创建相机对象 camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(292, 109, 268);//设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) } //初始化渲染器 function initRenender(){ //创建渲染器 renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); } //其他内容初始化 function initOthers(){ document.body.appendChild(renderer.domElement);//渲染到浏览器 } function yu() { // 加载理贴图 var textureTree = new THREE.TextureLoader().load("../../img/笑笑.jpg"); console.log(textureTree) // 创建一个组表示所有的雨滴 group = new THREE.Group(); // 批量创建表示雨滴的精灵模型 for (let i = 0; i < 400; i++) { var spriteMaterial = new THREE.SpriteMaterial({ map:textureTree,//设置精灵纹理贴图 }); // 创建精灵模型对象 var sprite = new THREE.Sprite(spriteMaterial); // 控制精灵大小, sprite.scale.set(8, 10, 1); 只需要设置x、y两个分量就可以 var k1 = Math.random() - 0.5; var k2 = Math.random() - 0.5; // 设置精灵模型位置，在整个空间上上随机分布 // 设置精灵模型位置，在空间中随机分布 sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2) group.add(sprite); } scene.add(group); } //定义窗口的设置 function setWindown(){ //加入事件监听器,窗口自适应 window.addEventListener('resize', function(){ var width = window.innerWidth; var height = window.innerHeight; renderer.setSize(width,height); camera.aspect = width/height; camera.updateProjectionMatrix(); }); } function initaxisHelper() { //辅助三维坐标系AxisHelper var axisHelper = new THREE.AxisHelper(250); scene.add(axisHelper); } //初始化光线 function initLight(){ //5. 光（Light）光源的基类。 light = new THREE.Light(0xFFFFFF,1.0); scene.add(light);//光线加入场景中 } //逻辑 var update=function(){ //物体随着XY轴旋转 //cube.rotation.x +=0.01; //cube.rotation.y += 0.005; } // 渲染函数 function render() { // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms // 每次渲染都会更新雨滴的位置，进而产生动画效果 group.children.forEach(sprite => { // 雨滴的y坐标每次减1 sprite.position.y -= 1; if (sprite.position.y < 0) { // 如果雨滴落到地面，重置y，从新下落 sprite.position.y = 200; } }); renderer.render(scene, camera); //执行渲染操作 //requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧 } //循环运行update，render var loop=function() { requestAnimationFrame(loop);//请求再次执行渲染函数render，渲染下一帧 update(); render(); } loop();//循环开始 </script> </body> </html>

最新回复(0)