Three.js中BoxBufferGeometry与BoxGeometry的区别是什么？

Hey there! I totally get why this can be confusing—Three.js has shifted its focus to performance over time, and these two classes are a perfect example of that evolution. Let’s break down their differences clearly:

Core Type & Performance #

• BoxGeometry is built on the old Geometry class, which stores vertex data in regular JavaScript arrays. While this made manual vertex tweaks easy back in the day, it’s inefficient because the CPU has to convert these arrays to GPU-friendly formats every frame.
• BoxBufferGeometry uses the modern BufferGeometry class, which stores vertex data directly in typed arrays (like Float32Array) that live in GPU memory. This cuts down on CPU-GPU data transfer drastically, making it way faster—especially when working with lots of objects or complex scenes.

API & Usage #

At first glance, creating a cube with either looks similar:

// Deprecated: BoxGeometry
const legacyCube = new THREE.BoxGeometry(2, 2, 2);

// Recommended: BoxBufferGeometry
const optimizedCube = new THREE.BoxBufferGeometry(2, 2, 2);

But modifying their data works differently:

• With BoxGeometry, you can directly access and edit arrays like geometry.vertices or geometry.faces.
• With BoxBufferGeometry, you use methods like getAttribute('position') to get the typed array, modify it, then call geometry.attributes.position.needsUpdate = true to let Three.js know the data changed. It’s a bit more verbose, but the performance payoff is huge.

Deprecation Status #

Big one: BoxGeometry (and the entire Geometry class) was deprecated in Three.js r125. The official docs explicitly recommend using BufferGeometry variants for all new projects. While legacy code might still use BoxGeometry, it’s no longer supported and could be removed in future versions.

Quick Recap #

• Use BoxBufferGeometry for all new work—it’s faster, more efficient, and future-proof.
• Only touch BoxGeometry if you’re maintaining an older project that hasn’t been updated to use buffer geometries.

内容的提问来源于stack exchange，提问作者Hitesh Indap