`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性，比如颜色、大小和透明度。

发布于：2024-06-24 ⋅ 阅读:(110) ⋅ 点赞:(0)

demo案例

在这里插入图片描述

THREE.PointsMaterial 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性，比如颜色、大小和透明度。下面是对其构造函数的参数、属性和方法的详细讲解。

构造函数

const material = new THREE.PointsMaterial(parameters);
参数（parameters）

parameters 是一个对象，用于初始化材质的各种属性。常用参数包括：

  • color: THREE.Color | string | number
    粒子的颜色。例如：new THREE.Color(0xffffff) 或者 0xffffff。

  • map: THREE.Texture
    用于每个粒子的纹理贴图。

  • size: number
    粒子的大小，默认值是 1。

  • sizeAttenuation: boolean
    粒子的大小是否随相机深度衰减，默认值是 true。

  • vertexColors: boolean
    是否使用顶点颜色，默认值是 false。

  • opacity: number
    材质的不透明度，范围是 0.0 到 1.0，默认值是 1.0。

  • transparent: boolean
    是否使用透明度，默认值是 false。

  • alphaTest: number
    透明度测试的阈值，范围是 0.0 到 1.0，默认值是 0。

  • blending: THREE.Blending
    材质的混合模式，默认值是 THREE.NormalBlending。

  • depthTest: boolean
    是否进行深度测试，默认值是 true。

  • depthWrite: boolean
    是否进行深度写入，默认值是 true。

属性

  • color: THREE.Color
    粒子的颜色，默认值是 new THREE.Color(0xffffff)。

  • map: THREE.Texture | null
    用于每个粒子的纹理贴图，默认值是 null。

  • size: number
    粒子的大小，默认值是 1。

  • sizeAttenuation: boolean
    粒子的大小是否随相机深度衰减，默认值是 true。

  • vertexColors: boolean
    是否使用顶点颜色，默认值是 false。

  • opacity: number
    材质的不透明度，范围是 0.0 到 1.0，默认值是 1.0。

  • transparent: boolean
    是否使用透明度，默认值是 false。

  • alphaTest: number
    透明度测试的阈值，范围是 0.0 到 1.0，默认值是 0。

  • blending: THREE.Blending
    材质的混合模式，默认值是 THREE.NormalBlending。

  • depthTest: boolean
    是否进行深度测试，默认值是 true。

  • depthWrite: boolean
    是否进行深度写入，默认值是 true。

方法

THREE.PointsMaterial 继承了 THREE.Material 的所有方法。常用的方法包括：

  • clone()
    创建一个材质的副本。

    const clonedMaterial = material.clone();

  • copy(source)
    从另一个材质复制属性。

    material.copy(otherMaterial);

  • dispose()
    释放材质占用的内存。当材质不再需要时应该调用此方法。

    material.dispose();

  • setValues(parameters)
    设置材质的属性。parameters 对象的属性名称和 THREE.PointsMaterial 的构造函数参数相同。

    material.setValues({ color: 0xff0000, size: 2 });

示例

下面是一个使用 THREE.PointsMaterial 创建粒子系统的示例：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建粒子几何体
const geometry = new THREE.BufferGeometry();
const vertices = [];

for (let i = 0; i < 10000; i++) {
  const x = THREE.MathUtils.randFloatSpread(2000);
  const y = THREE.MathUtils.randFloatSpread(2000);
  const z = THREE.MathUtils.randFloatSpread(2000);

  vertices.push(x, y, z);
}

geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// 创建粒子材质
const material = new THREE.PointsMaterial({
  color: 0x888888,
  size: 1,
  sizeAttenuation: true,
  transparent: true,
  opacity: 0.75
});

// 创建粒子系统
const particles = new THREE.Points(geometry, material);
scene.add(particles);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  particles.rotation.x += 0.001;
  particles.rotation.y += 0.002;

  renderer.render(scene, camera);
}

animate();

这个示例创建了一个简单的粒子系统，粒子随机分布在一个立方体区域内，并且粒子材质设置为半透明的灰色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - buffergeometry - custom VBOs</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>

<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - custom VBOs</div>

<script type="importmap">
    {
        "imports": {
            "three": "../build/three.module.js",
            "three/addons/": "./jsm/"
        }
    }
</script>

<script type="module">

    import * as THREE from 'three';

    import Stats from 'three/addons/libs/stats.module.js';

    let container, stats;
    let camera, scene, renderer;
    let points;

    const particles = 300000; // 粒子数量
    let drawCount = 10000; // 绘制的初始粒子数量

    init();
    animate();

    function init() {
        container = document.getElementById('container');

        // 初始化渲染器
        renderer = new THREE.WebGLRenderer({ antialias: false });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.appendChild(renderer.domElement);

        // 初始化相机
        camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
        camera.position.z = 2750;

        // 初始化场景
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050505);
        scene.fog = new THREE.Fog(0x050505, 2000, 3500);

        // 创建 BufferGeometry
        const geometry = new THREE.BufferGeometry();
        const positions = [];
        const positions2 = [];
        const colors = [];
        const color = new THREE.Color();

        const n = 1000, n2 = n / 2; // 粒子在立方体中的分布范围

        for (let i = 0; i < particles; i++) {
            // 随机生成粒子的位置
            const x = Math.random() * n - n2;
            const y = Math.random() * n - n2;
            const z = Math.random() * n - n2;

            positions.push(x, y, z);
            positions2.push(z * 0.3, x * 0.3, y * 0.3);

            // 根据位置生成颜色
            const vx = (x / n) + 0.5;
            const vy = (y / n) + 0.5;
            const vz = (z / n) + 0.5;

            color.setRGB(vx, vy, vz, THREE.SRGBColorSpace);
            colors.push(color.r, color.g, color.b);
        }

        // 获取 WebGL 上下文
        const gl = renderer.getContext();

        // 创建并绑定第一个位置缓冲区
        const pos = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, pos);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        // 创建并绑定第二个位置缓冲区
        const pos2 = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, pos2);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions2), gl.STATIC_DRAW);

        // 创建并绑定颜色缓冲区
        const rgb = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, rgb);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

        // 将缓冲区数据转换为 GLBufferAttribute 并设置到几何体属性中
        const posAttr1 = new THREE.GLBufferAttribute(pos, gl.FLOAT, 3, 4, particles);
        const posAttr2 = new THREE.GLBufferAttribute(pos2, gl.FLOAT, 3, 4, particles);
        geometry.setAttribute('position', posAttr1);

        // 每隔两秒切换位置属性
        setInterval(function () {
            const attr = geometry.getAttribute('position');
            geometry.setAttribute('position', (attr === posAttr1) ? posAttr2 : posAttr1);
        }, 2000);

        geometry.setAttribute('color', new THREE.GLBufferAttribute(rgb, gl.FLOAT, 3, 4, particles));

        // 创建粒子材质
        const material = new THREE.PointsMaterial({ size: 15, vertexColors: true });

        // 创建粒子系统并添加到场景中
        points = new THREE.Points(geometry, material);
        points.frustumCulled = false; // 关闭视锥体剔除

        scene.add(points);

        // 初始化统计信息
        stats = new Stats();
        container.appendChild(stats.dom);

        // 监听窗口大小变化
        window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
        stats.update();
    }

    function render() {
        drawCount = (Math.max(5000, drawCount) + Math.floor(500 * Math.random())) % particles;
        points.geometry.setDrawRange(0, drawCount);

        const time = Date.now() * 0.001;

        points.rotation.x = time * 0.1;
        points.rotation.y = time * 0.2;

        renderer.render(scene, camera);
    }

</script>

</body>
</html>

主要功能说明

  1. 初始化 Three.js 渲染器、相机和场景：

    • 创建并设置渲染器和相机。
    • 将渲染器的 DOM 元素添加到 HTML 容器中。
    • 设置场景背景和雾效果。

  2. 创建 BufferGeometry：

    • 生成粒子的位置和颜色数据。
    • 将这些数据绑定到 WebGL 缓冲区。
    • 将这些缓冲区转换为 GLBufferAttribute 并设置为几何体的属性。

  3. 设置粒子系统和材质：

    • 使用 PointsMaterial 创建粒子材质。
    • 将材质和几何体结合成 Points 对象，并添加到场景中。

  4. 动画和渲染循环：

    • 通过 requestAnimationFrame 实现动画循环。
    • 在每一帧中更新粒子系统的旋转，并调用渲染器渲染场景。

  5. 窗口调整处理：

    • 监听窗口大小变化事件，调整相机和渲染器的尺寸。

压图地址

image.png

一个功能强大的图片处理工具，它可以满足用户对于图片压缩、格式转换、质量调节以及长图片分割等多种需求。

【轻松压缩，一键搞定】您的图片处理神器来了！

压图地址

🎉 您是否曾为图片太大无法上传而烦恼？是否为图片格式不兼容而头疼？现在，有了我们的图片处理工具，这些问题将不复存在！

🌟 功能亮点：

批量压缩：无论您有多少张图片，无论尺寸大小，我们的工具都能一次性处理，让您的工作效率翻倍！
格式转换：支持多种图片格式之间的轻松转换，满足您在不同场景下的使用需求。
压缩质量可调：想要保留更多细节？还是追求更小的文件大小？压缩质量由您说了算！
长图片分割：再也不用担心长图无法完整显示或处理了，我们的工具能轻松将长图分割成多张图片，方便您进行后续编辑和分享。
获取网络图片：可将网络路径图片路径，转化成自己的图片进行处理下载,支持批量转换图片下载
📷 无论是从相机导出的大图，还是手机拍摄的生活照，我们的工具都能轻松应对，让您的图片处理变得简单又高效！

💡

压图地址

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布