3D Point Cloud Visualization

Interactive JavaScript 3D point cloud demo using Three.js PointsMaterial and BufferGeometry for efficient WebGL rendering.

What this code does

- JavaScript 3D Point Cloud: efficient visualization using BufferGeometry with 1500 random positions in Float32Array for optimal performance.
- Three.js PointsMaterial: renders each vertex as a colored point with configurable size and distance attenuation.
- WebGL Point Cloud Rendering: GPU-accelerated point rendering with orbit controls for 3D navigation.
- Point Cloud Animation: continuous Y-axis rotation demonstrates 3D point distribution and depth perception.
- OrbitControls Integration: mouse/touch controls for inspecting point cloud from any angle with zoom and pan.

JavaScript (plain)

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 4

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

const count = 1500
const positions = new Float32Array(count * 3)
for (let i = 0; i < count; i++) {
  positions[i * 3 + 0] = (Math.random() - 0.5) * 6
  positions[i * 3 + 1] = (Math.random() - 0.5) * 6
  positions[i * 3 + 2] = (Math.random() - 0.5) * 6
}
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const material = new THREE.PointsMaterial({
  color: 0x9bdc6e,
  size: 0.03,
  sizeAttenuation: true
})
const points = new THREE.Points(geometry, material)
scene.add(points)

function animate() {
  requestAnimationFrame(animate)
  points.rotation.y += 0.002
  controls.update()
  renderer.render(scene, camera)
}
animate()

← Back