Three.js 中的点云效果 点代替网格 使用 3D 模型 一点控制 鸣谢

2025-06-09

Three.js 中的点云效果

点代替网格

使用 3D 模型

一点控制

致谢

不久前，我建了一个网站，用来参加一个小比赛。为了给它增添点料，我决定添加一些 Three.js 的元素。我脑子里一直盘算着点云效果。Austin Mayer 在他的网站上实现了一个非常酷炫的点云效果，自从我在他的网站上看到之后，就一直在琢磨这个效果。

由于网站内容比较多，我决定实现一个非常基础的点云版本。Three.js 提供了一些函数，可以让你快速创建点云。

点代替网格

Three.js 中的网格（3D 对象）由几何体和材质组成。但您不想显示整个网格，只想显示其顶点。Three.jsPoints中的类可以接收几何体并显示点，而不是“完整”的对象。这样PointsMaterial您就可以控制点的大小。“点云网格”的代码如下所示：



  let geometry = new THREE.TorusGeometry(10, 3, 16, 100)
  let material = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.25 })
  mesh = new THREE.Points(geometry, material)

  scene.add(mesh)
Enter fullscreen mode Exit fullscreen mode

main.js如需完整代码，请单击/按下示例并在代码选项卡中查看！

使用 3D 模型

在 Three.js 中加载 3D 模型是可行的，但需要额外做一些工作。根据 3D 模型的格式，除了主库之外，您还需要加载一个加载器。我个人喜欢使用 .obj 模型，所以我个人需要OBJLoader.

如果您通过 HTML 标签加载该库，则需要添加一个额外的标签，用于加载 Three.js 下载包中附带的单独脚本。该脚本可在 中找到examples/js/loaders/OBJLoader.js。

如果您已包含整个文件夹加载，它将有点像：



<script src="three/examples/js/loaders/OBJLoader.js"></script>
Enter fullscreen mode Exit fullscreen mode

如果你使用 npm，可以通过 jsm 文件夹导入加载器。如果你更喜欢 require 语法，也可以继续使用 js 文件夹！导入语句如下所示：



//import syntax
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'

//require syntax, require adds OBJLoader directly to THREE
require('three/examples/js/loaders/OBJLoader.js')
Enter fullscreen mode Exit fullscreen mode

加载器的工作方式有点像不带承诺的扩展“fetch”。你输入包含模型的文件的 URL，加载器就会执行一个 http 请求。你为成功请求、仍在进行中的请求以及不成功的请求提供回调。

您可以通过选择结果中第一个子对象的几何形状来获取您加载的对象的几何形状。



const loader = new THREE.OBJLoader()
loader.load('https://cdn.glitch.com/fcf3c007-b4eb-4250-ba6b-653fdab94ce3%2Fjapanese_temple.obj?1558792651869',
(obj) => {
    // the request was successfull
    let material = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.25 })
    mesh = new THREE.Points(obj.children[0].geometry, material)
    mesh.position.y = -15 //this model is not exactly in the middle by default so I moved it myself
    scene.add(mesh)
},
(xhr) => {
    // the request is in progress
    console.log(xhr)
},
(err) => {
    // something went wrong
    console.error("loading .obj went wrong, ", err)
})
Enter fullscreen mode Exit fullscreen mode

小免责声明：3D 模型可以在 Autodesk Maya3D 和 Blender 等 3D 建模软件中使用几何体和“修改器”构建。如果模型的大部分内容都是使用修改器创建的，则在应用点云时，这些点将无法以“看到”对象的方式显示。因此，务必始终测试您想要用于此目的的 3D 模型。

一点控制

交互性总能让事情变得更有趣。像 Austin Mayer 网站上的悬停和变形效果确实需要投入时间和精力去创建。但 Three 有一些可以快速添加的功能，至少可以让用户使用 移动相机OrbitControls。与 3D 模型加载器一样，控件是需要加载的扩展程序。轨道控件位于 中examples/js/controls/OrbitControls.js（或examples/jsm/controls/OrbitControls.js使用导入语法）。代码如下所示：



 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 40

  const controls = new THREE.OrbitControls(camera)
  controls.enableZoom = false //zoom happens on scroll which can be quite annoying
Enter fullscreen mode Exit fullscreen mode

我希望这有助于在 Three.js 中创建点云的“入门”！

致谢

我最好的朋友Sven给了我很大的精神支持，他也提交了一个网站来参赛。我之前有很多疑虑，不知道该不该提交。很高兴他说服了我，因为我们今年冬天都会去上海🎉。如果你想了解更多信息，他不久前写了一篇文章：

斯文

为什么我在这里创建账户很困难，以及我为什么要这么做

斯文·霍夫曼・19年2月7日

#写作 #初学者 #职业 #元
鏂囩珷鏉ユ簮锛�https://dev.to/maniflames/pointcloud-effect-in- Three-js-3eic
Devto 翻译
PREV
从头开始创建类似 Google Cloud 和 Digital Ocean 的云基础设施：第 1 部分
NEXT
在 Three.js 中创建自定义着色器 Three JS Shaders 资源