粒子系统

于 2019-10-24 16:43:57 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： ThreeJs 文章标签： points threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TW934440653/article/details/102726746
版权

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

案例效果

在这里插入图片描述

主要代码讲解

（1）看看源码中：new THREE.Points（geometry，material）；
new THREE.PointsMaterial({color:0x00FF00,size:3}）的使用

（2）这里要注意的只要一点，就是将模型的顶点数据与粒子系统的材质融合即可。

var fbxLoader = new THREE.FBXLoader();
            fbxLoader.load('./model/Dancing.fbx',function(model){
                model.name = 'Dancing';
                model.traverse(function(child){
                    if(child.isMesh){
                        var Dancing = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x00FF00,size:3}));
                        Dancing.scale.x = 10;
                        Dancing.scale.y = 10;
                        Dancing.scale.z = 10;
                        Dancing.position.x = 200;
                        group.add(Dancing);
                    }
                })

                // mixer = new THREE.AnimationMixer(model);
                // var action = mixer.clipAction( model.animations[ 0 ] );
                // action.setDuration(18).play();
                // group.add(model);
                
            },function (xhr){
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( '当前加载进度：' + Math.round( percentComplete, 2 ) + '% ' );
				}
            },function(error){
                console.error(error);
            })

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粒子系统</title>
    <style>
    *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        #webGL{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <script src="../buildJs/build/three105.js"></script>
    <script src="../buildJs/libs/inflate.min.js"></script>
    <script src="../buildJs/loader/FBXLoader.js"></script>
    <script src="../buildJs/loader/OBJLoader.js"></script>
    <script src="../buildJs/controls/OrbitControls.js"></script>
    <div id="webGL"></div>
    <script>
        var scene,camera,renderer;
        var ambientLight,directionalLight;
        var dom,domWidth,domHeight;
        var mixer;
        var clock = new THREE.Clock();

        function initRender(){
            dom = document.getElementById('webGL');
            domWidth = dom.clientWidth;
            domHeight = dom.clientHeight;

            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(domWidth,domHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            dom.appendChild(renderer.domElement);
            renderer.setClearColor(0xffffff,1.0);
        }

        function initScene(){
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);
        }

        function initLight(){
            ambientLight = new THREE.AmbientLight(0x404040,1.0);
            scene.add(ambientLight);

            directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
            directionalLight.position.set(-300,500,500);
            directionalLight.lookAt(scene.position);
            scene.add(directionalLight);
        }

        function initCamera(){
            camera = new THREE.PerspectiveCamera(45,domWidth / domHeight,1,30000);
            camera.position.set(0,1000,7000);
            camera.lookAt(scene.position);
            scene.add(camera);
        }

        function listenWindow(){
            window.addEventListener('resize',onWindow,'false');
            function onWindow (){
                domWidth = window.innerWidth;
                domHeight = window.innerHeight;
                camera.aspect = domWidth / domHeight;
                renderer.setSize(domWidth , domHeight);
                camera.updateProjectionMatrix();
            }
        }

        function OrbitControlsEvent(){
            var controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target.set( 0, 100, 0 );
            controls.update();
        }

        function animate(){
            var delta = clock.getDelta();
            if(mixer) mixer.update(delta);

            requestAnimationFrame(animate);
            renderer.render(scene,camera);
        }

        function initObject(){
            var group = new THREE.Group();
            scene.add(group);

            var fbxLoader = new THREE.FBXLoader();
            fbxLoader.load('./model/Dancing.fbx',function(model){
                model.name = 'Dancing';
                model.traverse(function(child){
                    if(child.isMesh){
                        var Dancing = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x00FF00,size:3}));
                        Dancing.scale.x = 10;
                        Dancing.scale.y = 10;
                        Dancing.scale.z = 10;
                        Dancing.position.x = 200;
                        group.add(Dancing);
                    }
                })

                // mixer = new THREE.AnimationMixer(model);
                // var action = mixer.clipAction( model.animations[ 0 ] );
                // action.setDuration(18).play();
                // group.add(model);
                
            },function (xhr){
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( '当前加载进度：' + Math.round( percentComplete, 2 ) + '% ' );
				}
            },function(error){
                console.error(error);
            })

            var objLoader = new THREE.OBJLoader();
            objLoader.load('./model/male02.obj',function(model){
                model.name = 'WaltHead';
                model.traverse(function(child){
                    if(child.isMesh){
                        var WaltHead = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x0000FF,size:3}));
                        WaltHead.scale.x = 10;
                        WaltHead.scale.y = 10;
                        WaltHead.scale.z = 10;
                        WaltHead.position.x = -1000;
                        group.add(WaltHead);
                    }
                })
            },function (xhr){
                console.log( (xhr.loaded / xhr.total) * 100 +'%' );
            },function(error){
                console.error(error);
            })

            var plane = new THREE.PlaneBufferGeometry(15000,15000,60,60);
            var planeMesh = new THREE.Points(plane,new THREE.PointsMaterial({color:0xFF0000,size:10}));
            planeMesh.rotation.x = -Math.PI /2;
            planeMesh.position.y = -200;
            group.add(planeMesh);
        }

        

        initRender();
        initScene();
        initLight();
        initCamera();
        listenWindow();
        OrbitControlsEvent();
        animate();
        initObject();
    </script>
</body>
</html>
桑榆未晚_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
粒子系统（particle system）
知屋安砖
05-11 1491
粒子系统示例CSSJS 更多有趣示例 尽在小红砖社区 示例 CSS body{ background-color: #D2691E; margin: 0px; } JS //threejs - demo - https://threejs.org/examples/webgl_particles_random.html var container = document.createElement('div'); document.body.appendChild( container ); v
粒子系统基础
Mr.kun的博客
04-04 766
文章目录粒子系统是什么？如果实现粒子的运动 粒子系统是什么？ 粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术， 而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。 经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、 云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。 这是从百度百科上摘抄下来的一句话[嘿嘿]，看起来一大段，其实也没必要知...
粒子系统概述
a1341188的博客
03-02 454
开始以为粒子系统也和Fog一样有现成的函数，只要改变一下状态，设置一下就可以达到想要的效果，在看过NEHE的粒子系统和网络上的一些介绍后才知道，粒子系统是一步一步通过很基本的操作构造的。 粒子系统主要用来解决由大量按一定规则运动（变化）的微小物质组成的大物质在计算机上的生成与显示的问题。 每个粒子需要一些属性来和其他粒子区别。通常在一个系统中的所有粒子有一个相同的属性集。 ...
初学粒子系统
weixin_44846313的博客
03-30 566
初学粒子系统粒子系统简介粒子系统的组件（ParticlreSystem）ParticleSystem属性如何用代码控制粒子一款免费制作粒子的工具用粒子实现烟花效果 粒子系统简介 粒子系统是指计算机图形学中模拟特定现象的技术，它在模仿自然现象、物理现象及空间扭曲上具备得天独厚的优势，能为我们实现一些真实自然而又带有随机性的效果（如爆炸、烟花、水流）提供了方便。 粒子系统的组件（ParticlreSy...
旧粒子系统转换成新粒子系统.zip
06-24
在Unity引擎中，粒子系统是用于创建各种视觉特效，如火焰、烟雾、水波、火花等的重要工具。旧版的粒子系统（Legacy Particle System）虽然功能强大，但与新版ParticleSystem相比，存在性能消耗大、功能限制多等问题...
SDL2粒子：SDL2的粒子系统
02-04
【标题】：“SDL2粒子：SDL2的粒子系统” 【正文】： 在游戏开发中，粒子系统是一个重要的组件，用于创建各种视觉效果，如火焰、烟雾、爆炸、水流等。SDL2（Simple DirectMedia Layer 2）是一个跨平台的开发库，常...
水花、瀑布等特效，unity自带粒子系统做的
10-03
Unity3D是一款强大的游戏开发引擎，它提供了许多内置工具来帮助开发者创建丰富的视觉效果，其中粒子系统就是其中之一。粒子系统允许开发者模拟各种自然现象，如火焰、烟雾、爆炸，当然也包括水花、水流和瀑布等水体...
webgl-particles:WebGL粒子系统演示
03-11
WebGL粒子系统是一种在网页上实现动态视觉效果的技术，它利用了WebGL，这是一个JavaScript API，允许在浏览器中进行硬件加速的3D图形渲染。WebGL粒子系统通常用于创建火焰、烟雾、水波、星光等特效，为网页增加丰富...
unity旧粒子系统转换为新粒子系统
11-28
由于在Unity的所有最新版本中都不断删除旧粒子，因此该工具无法在所有最新版本中使用： 2017.4和更早版本：将在 2018.1完全运行：如果您的项目中有任何使用旧粒子的脚本，则它们将无法编译该工具将无法使用。 ...
粒子系统(Particle System)
yejian2011的专栏
08-15 1848
介绍 术语粒子系统指的是使用大量的非常小的子画面或其它图形对象来模拟若干种“模糊”的现象，这是否则很难再现与常规的渲染技术计算机图形技术 - 通常是高度混沌系统，自然现象，或由其引起的化学反应过程。 Point vs Quad 在Cocos2d-x早期版本中,Cocos2d-x里粒子系统有两种类型:Quad 和 Point粒子系统: CCParticleSystem
ThreeJs基础常识
TW934440653的博客
10-13 8240
作者：桑榆 QQ：934440653 有问题，评论留言，或qq联系 前两章的尚未整理，后续整理完成，会补上。 第一章 场景 待更新… 第二章 相机 待更新… 第三章 光源 选择“license server” 输入：http://idea.imsxm.com/ 一、光源的种类 ** 名称 ** ** 描述 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值