Three.js - 粒子系统 Points 和 PointsMaterial

最新推荐文章于 2024-05-20 08:18:40 发布

「已注销」

最新推荐文章于 2024-05-20 08:18:40 发布

阅读量8k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81702561

版权

THREE.Points是用来创建点的类，也用来批量管理粒子，这个类的构造函数可以接受两个参数，一个几何体和一个材质，几何体参数用来制定粒子的位置坐标，而材质参数用来格式化粒子。
可以基于简单几何体对象例如BoxGeometry、SphereGeometry等作为粒子系统的参数，但是一般来讲，都需要自己指定顶点来确定粒子的位置。
通过THREE.PointsMaterial可以设置粒子的属性参数，示例中通过调试插件可以尝试着调整粒子的样式。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180807/03-PointsMaterial.html
这里写图片描述
点击map添加贴图的话，可以实现，下雨的效果

属性

名称	描述
color	点（粒子）的颜色，默认值为白色
map	贴图
size	点的大小，默认值为1
vertexColors	若不设置此属性，则所有的带你具有相同的颜色，若设置此属性为`true`或者`THREE.VertexColors`并且，几何体的`color`属性是一个颜色数组，那么就会应用颜色数组的值，默认值为`THREE.NoColors`
sizeAttenuation	设置点的大小是否随着距离的增大而变小，默认为`true`,如果设置为`false`,z则所有点的大小不随距离的增加而变化

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粒子系统 Points</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, points, controls, guiControls;

    /* 场景 */
    function initScene() {
   

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050505);
        scene.fog = new THREE.Fog(0x050505, 2000, 3500);
    }

    /* 相机 */
    function initCamera() {
   

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
5
评论
Three.js - 粒子系统 Points 和 PointsMaterial

THREE.Points是用来创建点的类，也用来批量管理粒子，这个类的构造函数可以接受两个参数，一个几何体和一个材质，几何体参数用来制定粒子的位置坐标，而材质参数用来格式化粒子。可以基于简单几何体对象例如BoxGeometry、SphereGeometry等作为粒子系统的参数，但是一般来讲，都需要自己指定顶点来确定粒子的位置。通过THREE.PointsMaterial可以设置粒子的属性参...
复制链接

扫一扫