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

news2024/11/15 23:34:28

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

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

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

压图地址

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

🌟 功能亮点：

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

💡

压图地址

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1861036.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sourceTree 和Tortoise git软件的对比，以及使用sourceTree管理公司托管的 gitlab 项目或github项目

sourceTree 和Tortoise git软件的对比，以及使用sourceTree管理公司托管的 gitlab 项目或github项目

文章目录 Tortoisegit 和sourcetree的比较如何添加 gitlab 的社区版账号总结参考资料 Tortoisegit 和sourcetree的比较 我在 window都是用 Git 小乌龟&#xff08;Tortoise git&#xff09;来可视化管理 Git 项目。这时是不区分 Git 平台的&#xff0c;也就是不管你用的是 Git…
阅读更多...
第4讲：pixi.js绘制舞台、随窗口大小而改变画布大小和舞台位置

第4讲：pixi.js绘制舞台、随窗口大小而改变画布大小和舞台位置

基于前面写的代码&#xff0c;在gamelets的工程目录下新建一个CanvasAndStage.ts 代码如下 import {Application, Graphics} from pixi.js; // 不要忘了&#xff0c;一定要引用这个css样式&#xff0c;否则就会以默认样式显示 import ./style.css // app.view就是画布&#xf…
阅读更多...
宝塔面板部署前端项目

宝塔面板部署前端项目

部署前端项目 1 打包自己的项目2 登录宝塔面板3 添加站点4 设置域名5 进入当前站点对应的文件目录中6 上传打包后的文件7 访问网站 1 打包自己的项目 2 登录宝塔面板 点击左侧“网站”菜单进入对应页面 点击“添加站点” 3 添加站点 填写域名&#xff0c;如果没有域名的&am…
阅读更多...
公交行业系统特点及面临的挑战

公交行业系统特点及面临的挑战

在当前城市发展中&#xff0c;公交行业作为公共交通的重要组成部分&#xff0c;承担着重要的社会责任。随着科技的进步和城市化进程的加快&#xff0c;公交行业系统也在不断地发展和完善。然而&#xff0c;从目前的发展情况来看&#xff0c;公交行业系统也呈现出一些显著的特点…
阅读更多...
jmeter乱码汇总

jmeter乱码汇总

一、Web页面乱码 如果想让他显示中文可以按以下操作: 1、打开jmter配置文件 bin/jmeter.properties 2、修改配置文件&#xff0c;查找“sampleresult.default.encoding”将其改为utf8&#xff0c;注意要去掉“#”号 sampleresult.default.encodingutf-8 3、重启 jmeter 4、再次…
阅读更多...
让TSN DDS运转起来——面向智能汽车的以太网测试解决方案

让TSN DDS运转起来——面向智能汽车的以太网测试解决方案

概述 作为OPEN联盟和AUTOSAR联盟的核心成员&#xff0c;经纬恒润多年来持续为国内外各大OEM和供应商提供车载以太网相关的咨询服务&#xff0c;涵盖TCP/IP、SOME/IP、DDS、诊断、TSN等前沿技术领域的设计和测试。同时&#xff0c;经纬恒润与行业内的合作伙伴紧密合作&#xff0…
阅读更多...
Linux删除文件磁盘空间未释放解决办法

Linux删除文件磁盘空间未释放解决办法

工作中经常遇到Linux系统磁盘空间不足&#xff0c;但是删除后较大的日志文件后&#xff0c;发现磁盘空间仍没有被释放。 解决思路 1、工作发现磁盘空间不足&#xff1b; 2、找到占用磁盘空间较大的文件进行删除&#xff1b; 3、删除文件后&#xff0c;查看磁盘空间使用情况…
阅读更多...
Web Serial串口通信实现WEB浏览器读写M1卡

Web Serial串口通信实现WEB浏览器读写M1卡

本示例使用的设备&#xff1a;RS232串口RFID NFC IC卡读写器可二次开发编程发卡器USB转COM-淘宝网 (taobao.com) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l…
阅读更多...
第10章 启动过程组 （启动过程组的重点工作）

第10章 启动过程组 （启动过程组的重点工作）

第10章 启动过程组 10.3启动过程组的重点工作&#xff0c;在第三版教材第362~364页&#xff1b; 文字图片音频方式 第一个知识点&#xff1a;项目启动会议 1、作用 标志着对项目经理责权的定义结果的正式公布&#xff0c;通常由项目经理负责组织和召开。2、目的 使项目各…
阅读更多...
AI网络爬虫：下载m3u8视频文件

AI网络爬虫：下载m3u8视频文件

要下载m3u8视频文件&#xff0c;首先得找到m3u8地址&#xff0c;按下F12键&#xff0c;看网络-fetch/xhr,然后找网址中包括m3u8的地址&#xff0c;再预览或者看下相应 https://1304688195.vod2.myqcloud.com/9d058fb7vodtranscq1304688195/1194c6da1253642699220090018/video_1…
阅读更多...
【阅读论文】-- IDmvis：面向1型糖尿病治疗决策支持的时序事件序列可视化

【阅读论文】-- IDmvis：面向1型糖尿病治疗决策支持的时序事件序列可视化

IDMVis: Temporal Event Sequence Visualization for Type 1 Diabetes Treatment Decision Support 摘要1 引言2 1 型糖尿病的背景3 相关工作3.1 时间事件序列可视化3.2 电子健康记录可视化3.3 1 型糖尿病可视化3.4 任务分析与抽象 4 数据抽象5 层次化任务抽象5.1 临床医生工作…
阅读更多...
【IM 服务】新用户为什么刚注册就能收到通知？为什么能接收注册前的通知？

【IM 服务】新用户为什么刚注册就能收到通知？为什么能接收注册前的通知？

功能说明&#xff1a; 默认新注册的用户可以接收到注册前 7 天内的广播消息。您可以从控制台免费基础功能页面关闭该服务。 开通方式&#xff1a; 访问开发者后台 免费基础功能 1页面&#xff0c;确认应用名称与环境&#xff08;开发 /生产 &#xff09;正确无误后&#xff0c…
阅读更多...
统一视频接入平台LntonCVS视频共享交换平台智慧景区运用方案

统一视频接入平台LntonCVS视频共享交换平台智慧景区运用方案

随着夏季的到来&#xff0c;各地景区迎来了大量游客&#xff0c;而景区管理面临的挑战也愈加严峻&#xff0c;尤其是安全问题显得格外突出。 视频监控在预防各类安全事故方面发挥着重要作用&#xff0c;不论是自然景区还是人文景区&#xff0c;都潜藏着诸多安全隐患&#xff0…
阅读更多...
eslint 与 prettier 的一些常见的配置项（很详细）

eslint 与 prettier 的一些常见的配置项（很详细）

目录 1、eslint 常见配置项&#xff08;语法规范&#xff09; 2、 prettier 常见的配置项&#xff08;格式规范&#xff09; 代码规范相关内容看小编的该文章&#xff0c;获取对你有更好的帮助 vsCode代码格式化&#xff08;理解eslint、vetur、prettier&#xff0c;实现格式…
阅读更多...
AIPainter：创意绘画的智能助手

AIPainter：创意绘画的智能助手

AIPainter 介绍 AIPainter是一款简单易用的AI画图工具&#xff0c;支持文生图、图生图&#xff08;提示词改图、图片变体、分辨率增强等&#xff09;&#xff0c;底层大模型基于开源的腾讯混元文生图、SDXL等。 功能特点 提示词库 AIPainter默认提供了一些常用场景的提示词供…
阅读更多...
（python）小学出题热门词汇可视化绘制

（python）小学出题热门词汇可视化绘制

1.代码 import pandas as pd from wordcloud import WordCloud import matplotlib.pyplot as plt from collections import Counter import jieba # 如果你处理的是中文文本&#xff0c;需要jieba分词 import re # 停用词列表&#xff0c;这里只是示例&#xff0c…
阅读更多...
2024年【R2移动式压力容器充装】考试总结及R2移动式压力容器充装试题及解析

2024年【R2移动式压力容器充装】考试总结及R2移动式压力容器充装试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【R2移动式压力容器充装】考试总结及R2移动式压力容器充装试题及解析&#xff0c;包含R2移动式压力容器充装考试总结答案和解析及R2移动式压力容器充装试题及解析练习。安全生产模拟考试一点通结合国家R2移动式…
阅读更多...
PWN练习---Heap_1

PWN练习---Heap_1

heap_Easy_Uaf 题源&#xff1a;PolarD&N 考点&#xff1a;UAF漏洞(use after free) 源码 程序是一个菜单&#xff0c;可以实现add&#xff0c;dele&#xff0c;edit&#xff0c;puts 堆块内容等的功能。&#xff08;堆块编号从0开始&#xff09; 注意到一个存在backdoor的…
阅读更多...
定制化服务：可燃气体报警器检定收费新模式

定制化服务：可燃气体报警器检定收费新模式

随着工业化和城市化的快速发展&#xff0c;可燃气体报警器作为重要的安全监测设备&#xff0c;其准确性和可靠性对于保障人们的生命财产安全至关重要。因此&#xff0c;可燃气体报警器的定期检定和维护显得尤为重要。 在这篇文章中&#xff0c;佰德将围绕可燃气体报警器检定收…
阅读更多...
ssm 宠物领养系统-计算机毕业设计源码08465

ssm 宠物领养系统-计算机毕业设计源码08465

目 录 摘要 1 绪论 1.1课题背景及意义 1.2研究现状 1.3ssm框架介绍 1.3论文结构与章节安排 2 宠物领养系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023