Three.js - 从 PLY 模型中创建粒子系统

最新推荐文章于 2024-07-29 18:06:52 发布

「已注销」

最新推荐文章于 2024-07-29 18:06:52 发布

阅读量1.6k

点赞数

分类专栏： threejs

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

版权

本文介绍如何利用Three.js库从PLY格式的3D模型中创建粒子系统。PLY格式用于存储简单的3D几何数据，包括顶点、颜色、法线和uv坐标。示例展示了导入PLY文件并将其转换为粒子系统的步骤。

摘要由CSDN通过智能技术生成

PLY全称（Polygon or Stanford Triangle Format）多边形或三角形格式，可以有效地保存和加载简单、静态的3D内容,支持二进制和ascii格式。
可以存储顶点位置、颜色、法线和uv坐标，不能保存纹理。
示例：
https://ithanmang.gitee.io/threejs/home/201808/20180829/04-generate-points.html
这里写图片描述
① 导入 ply 格式的模型
引入PLYLoader.js文件

<script src="../../libs/examples/js/loaders/PLYLoader.js"></script>

加载ply的文件

let loader = new THREE.PLYLoader();
loader.load('../../models/ply/test.ply', function (obj) {
   
      console.log(obj);
  }

查看回调函数中打印输出的信息，可以看到是一个BufferGeometry缓存几何对象，因为ply格式的文件，只能保存模型的几何数据。
这里写图片描述
② 通过导入的几何数据创建粒子系统
通过加载ply格式的文件，可以直接创建THREE.Points粒子系统对象

 let mateial = new THREE.PointsMaterial({
   
    color: 0xffffff,
    size: 0.05,
    opacity: 0.5,
    transparent: true,
    blending: THREE.AdditiveBlending,
    map: generateSprite()
});

points = new THREE.Points(loadGeometry, mateial);
points.translateZ(-5);
points.translateY(2);
scene.add(points);

generateSprite()用于生成粒子的纹理
③ 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从加载进来的模型生成粒子系统</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden;/* 溢出隐藏 */
        }
        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
    </style>
    <script src="../../libs/build/three-r93.js"></script>
    <script src