You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
455 lines
24 KiB
455 lines
24 KiB
2 years ago
|
<!DOCTYPE html><html lang="en"><head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Custom BufferGeometry</title>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="twitter:site" content="@threejs">
|
||
|
|
<meta name="twitter:title" content="Three.js – Custom BufferGeometry">
|
||
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
||
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
||
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/manual/resources/lesson.css">
|
||
|
|
<link rel="stylesheet" href="/manual/resources/lang.css">
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../../build/three.module.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="lesson-title">
|
||
|
|
<h1>Custom BufferGeometry</h1>
|
||
|
|
</div>
|
||
|
|
<div class="lesson">
|
||
|
|
<div class="lesson-main">
|
||
|
|
<p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> is three.js's way of representing all geometry. A <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>
|
||
|
|
essentially a collection <em>named</em> of <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s.
|
||
|
|
Each <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> represents an array of one type of data: positions,
|
||
|
|
normals, colors, uv, etc... Together, the named <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s represent
|
||
|
|
<em>parallel arrays</em> of all the data for each vertex.</p>
|
||
|
|
<div class="threejs_center"><img src="../resources/threejs-attributes.svg" style="width: 700px"></div>
|
||
|
|
|
||
|
|
<p>Above you can see we have 4 attributes: <code class="notranslate" translate="no">position</code>, <code class="notranslate" translate="no">normal</code>, <code class="notranslate" translate="no">color</code>, <code class="notranslate" translate="no">uv</code>.
|
||
|
|
They represent <em>parallel arrays</em> which means that the Nth set of data in each
|
||
|
|
attribute belongs to the same vertex. The vertex at index = 4 is highlighted
|
||
|
|
to show that the parallel data across all attributes defines one vertex.</p>
|
||
|
|
<p>This brings up a point, here's a diagram of a cube with one corner highlighted.</p>
|
||
|
|
<div class="threejs_center"><img src="../resources/cube-faces-vertex.svg" style="width: 500px"></div>
|
||
|
|
|
||
|
|
<p>Thinking about it that single corner needs a different normal for each face of the
|
||
|
|
cube. A normal is info about which direction something faces. In the diagram
|
||
|
|
the normals are presented by the arrows around the corner vertex showing that each
|
||
|
|
face that shares that vertex position needs a normal that points in a different direction.</p>
|
||
|
|
<p>That corner needs different UVs for each face as well. UVs are texture coordinates
|
||
|
|
that specify which part of a texture being drawn on a triangle corresponds to that
|
||
|
|
vertex position. You can see the green face needs that vertex to have a UV that corresponds
|
||
|
|
to the top right corner of the F texture, the blue face needs a UV that corresponds to the
|
||
|
|
top left corner of the F texture, and the red face needs a UV that corresponds to the bottom
|
||
|
|
left corner of the F texture.</p>
|
||
|
|
<p>A single <em>vertex</em> is the combination of all of its parts. If a vertex needs any
|
||
|
|
part to be different then it must be a different vertex.</p>
|
||
|
|
<p>As a simple example let's make a cube using <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. A cube is interesting
|
||
|
|
because it appears to share vertices at the corners but really
|
||
|
|
does not. For our example we'll list out all the vertices with all their data
|
||
|
|
and then convert that data into parallel arrays and finally use those to make
|
||
|
|
<a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s and add them to a <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
|
||
|
|
<p>We start with a list of all the data needed for the cube. Remember again
|
||
|
|
that if a vertex has any unique parts it has to be a separate vertex. As such
|
||
|
|
to make a cube requires 36 vertices. 2 triangles per face, 3 vertices per triangle,
|
||
|
|
6 faces = 36 vertices.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const vertices = [
|
||
|
|
// front
|
||
|
|
{ pos: [-1, -1, 1], norm: [ 0, 0, 1], uv: [0, 0], },
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 1], },
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 0, 0, 1], uv: [1, 1], },
|
||
|
|
// right
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 1, 0, 0], uv: [0, 0], },
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 1], },
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 1, 0, 0], uv: [1, 1], },
|
||
|
|
// back
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 0, 0, -1], uv: [0, 0], },
|
||
|
|
{ pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 1], },
|
||
|
|
{ pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, -1], norm: [ 0, 0, -1], uv: [1, 1], },
|
||
|
|
// left
|
||
|
|
{ pos: [-1, -1, -1], norm: [-1, 0, 0], uv: [0, 0], },
|
||
|
|
{ pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 1], },
|
||
|
|
{ pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, 1], norm: [-1, 0, 0], uv: [1, 1], },
|
||
|
|
// top
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 0, 1, 0], uv: [0, 0], },
|
||
|
|
{ pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 1], },
|
||
|
|
{ pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, 1], norm: [ 0, 1, 0], uv: [1, 1], },
|
||
|
|
// bottom
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 0, -1, 0], uv: [0, 0], },
|
||
|
|
{ pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 1], },
|
||
|
|
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 1], },
|
||
|
|
{ pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [-1, -1, -1], norm: [ 0, -1, 0], uv: [1, 1], },
|
||
|
|
];
|
||
|
|
</pre>
|
||
|
|
<p>We can then translate all of that into 3 parallel arrays</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const positions = [];
|
||
|
|
const normals = [];
|
||
|
|
const uvs = [];
|
||
|
|
for (const vertex of vertices) {
|
||
|
|
positions.push(...vertex.pos);
|
||
|
|
normals.push(...vertex.norm);
|
||
|
|
uvs.push(...vertex.uv);
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p>Finally we can create a <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> and then a <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> for each array
|
||
|
|
and add it to the <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no"> const geometry = new THREE.BufferGeometry();
|
||
|
|
const positionNumComponents = 3;
|
||
|
|
const normalNumComponents = 3;
|
||
|
|
const uvNumComponents = 2;
|
||
|
|
geometry.setAttribute(
|
||
|
|
'position',
|
||
|
|
new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'normal',
|
||
|
|
new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'uv',
|
||
|
|
new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
|
||
|
|
</pre>
|
||
|
|
<p>Note that the names are significant. You must name your attributes the names
|
||
|
|
that match what three.js expects (unless you are creating a custom shader).
|
||
|
|
In this case <code class="notranslate" translate="no">position</code>, <code class="notranslate" translate="no">normal</code>, and <code class="notranslate" translate="no">uv</code>. If you want vertex colors then
|
||
|
|
name your attribute <code class="notranslate" translate="no">color</code>.</p>
|
||
|
|
<p>Above we created 3 JavaScript native arrays, <code class="notranslate" translate="no">positions</code>, <code class="notranslate" translate="no">normals</code> and <code class="notranslate" translate="no">uvs</code>.
|
||
|
|
We then convert those into
|
||
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a>
|
||
|
|
of type <code class="notranslate" translate="no">Float32Array</code>. A <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> requires a TypedArray not a native
|
||
|
|
array. A <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> also requires you to tell it how many components there
|
||
|
|
are per vertex. For the positions and normals we have 3 components per vertex,
|
||
|
|
x, y, and z. For the UVs we have 2, u and v.</p>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube.html" target="_blank">click here to open in a separate window</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p>That's a lot of data. A small thing we can do is use indices to reference
|
||
|
|
the vertices. Looking back at our cube data, each face is made from 2 triangles
|
||
|
|
with 3 vertices each, 6 vertices total, but 2 of those vertices are exactly the same;
|
||
|
|
The same position, the same normal, and the same uv.
|
||
|
|
So, we can remove the matching vertices and then
|
||
|
|
reference them by index. First we remove the matching vertices.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const vertices = [
|
||
|
|
// front
|
||
|
|
{ pos: [-1, -1, 1], norm: [ 0, 0, 1], uv: [0, 0], }, // 0
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 0], }, // 1
|
||
|
|
{ pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 1], }, // 2
|
||
|
|
-
|
||
|
|
- { pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 1], },
|
||
|
|
- { pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 0, 0, 1], uv: [1, 1], }, // 3
|
||
|
|
// right
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 1, 0, 0], uv: [0, 0], }, // 4
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 0], }, // 5
|
||
|
|
-
|
||
|
|
- { pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 1], },
|
||
|
|
- { pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 1], }, // 6
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 1, 0, 0], uv: [1, 1], }, // 7
|
||
|
|
// back
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 0, 0, -1], uv: [0, 0], }, // 8
|
||
|
|
{ pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 0], }, // 9
|
||
|
|
-
|
||
|
|
- { pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 1], },
|
||
|
|
- { pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 1], }, // 10
|
||
|
|
{ pos: [-1, 1, -1], norm: [ 0, 0, -1], uv: [1, 1], }, // 11
|
||
|
|
// left
|
||
|
|
{ pos: [-1, -1, -1], norm: [-1, 0, 0], uv: [0, 0], }, // 12
|
||
|
|
{ pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 0], }, // 13
|
||
|
|
-
|
||
|
|
- { pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 1], },
|
||
|
|
- { pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 0], },
|
||
|
|
{ pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 1], }, // 14
|
||
|
|
{ pos: [-1, 1, 1], norm: [-1, 0, 0], uv: [1, 1], }, // 15
|
||
|
|
// top
|
||
|
|
{ pos: [ 1, 1, -1], norm: [ 0, 1, 0], uv: [0, 0], }, // 16
|
||
|
|
{ pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 0], }, // 17
|
||
|
|
-
|
||
|
|
- { pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 1], },
|
||
|
|
- { pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 1], }, // 18
|
||
|
|
{ pos: [-1, 1, 1], norm: [ 0, 1, 0], uv: [1, 1], }, // 19
|
||
|
|
// bottom
|
||
|
|
{ pos: [ 1, -1, 1], norm: [ 0, -1, 0], uv: [0, 0], }, // 20
|
||
|
|
{ pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 0], }, // 21
|
||
|
|
-
|
||
|
|
- { pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 1], },
|
||
|
|
- { pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 0], },
|
||
|
|
{ pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 1], }, // 22
|
||
|
|
{ pos: [-1, -1, -1], norm: [ 0, -1, 0], uv: [1, 1], }, // 23
|
||
|
|
];
|
||
|
|
</pre>
|
||
|
|
<p>So now we have 24 unique vertices. Then we specify 36 indices
|
||
|
|
for the 36 vertices we need drawn to make 12 triangles by calling <a href="/docs/#api/en/core/BufferGeometry.setIndex"><code class="notranslate" translate="no">BufferGeometry.setIndex</code></a> with an array of indices.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.setAttribute(
|
||
|
|
'position',
|
||
|
|
new THREE.BufferAttribute(positions, positionNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'normal',
|
||
|
|
new THREE.BufferAttribute(normals, normalNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'uv',
|
||
|
|
new THREE.BufferAttribute(uvs, uvNumComponents));
|
||
|
|
|
||
|
|
+geometry.setIndex([
|
||
|
|
+ 0, 1, 2, 2, 1, 3, // front
|
||
|
|
+ 4, 5, 6, 6, 5, 7, // right
|
||
|
|
+ 8, 9, 10, 10, 9, 11, // back
|
||
|
|
+ 12, 13, 14, 14, 13, 15, // left
|
||
|
|
+ 16, 17, 18, 18, 17, 19, // top
|
||
|
|
+ 20, 21, 22, 22, 21, 23, // bottom
|
||
|
|
+]);
|
||
|
|
</pre>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube-indexed.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-indexed.html" target="_blank">click here to open in a separate window</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> has a <a href="/docs/#api/en/core/BufferGeometry#computeVertexNormals"><code class="notranslate" translate="no">computeVertexNormals</code></a> method for computing normals if you
|
||
|
|
are not supplying them. Unfortunately,
|
||
|
|
since positions can not be shared if any other part of a vertex is different,
|
||
|
|
the results of calling <code class="notranslate" translate="no">computeVertexNormals</code> will generate seams if your
|
||
|
|
geometry is supposed to connect to itself like a sphere or a cylinder.</p>
|
||
|
|
<div class="spread">
|
||
|
|
<div>
|
||
|
|
<div data-diagram="bufferGeometryCylinder"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>For the cylinder above the normals were created using <code class="notranslate" translate="no">computeVertexNormals</code>.
|
||
|
|
If you look closely there is a seam on the cylinder. This is because there
|
||
|
|
is no way to share the vertices at the start and end of the cylinder since they
|
||
|
|
require different UVs so the function to compute them has no idea those are
|
||
|
|
the same vertices to smooth over them. Just a small thing to be aware of.
|
||
|
|
The solution is to supply your own normals.</p>
|
||
|
|
<p>We can also use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a> from the start instead of native JavaScript arrays.
|
||
|
|
The disadvantage to TypedArrays is you must specify their size up front. Of
|
||
|
|
course that's not that large of a burden but with native arrays we can just
|
||
|
|
<code class="notranslate" translate="no">push</code> values onto them and look at what size they end up by checking their
|
||
|
|
<code class="notranslate" translate="no">length</code> at the end. With TypedArrays there is no push function so we need
|
||
|
|
to do our own bookkeeping when adding values to them.</p>
|
||
|
|
<p>In this example knowing the length up front is pretty easy since we're using
|
||
|
|
a big block of static data to start.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const positions = [];
|
||
|
|
-const normals = [];
|
||
|
|
-const uvs = [];
|
||
|
|
+const numVertices = vertices.length;
|
||
|
|
+const positionNumComponents = 3;
|
||
|
|
+const normalNumComponents = 3;
|
||
|
|
+const uvNumComponents = 2;
|
||
|
|
+const positions = new Float32Array(numVertices * positionNumComponents);
|
||
|
|
+const normals = new Float32Array(numVertices * normalNumComponents);
|
||
|
|
+const uvs = new Float32Array(numVertices * uvNumComponents);
|
||
|
|
+let posNdx = 0;
|
||
|
|
+let nrmNdx = 0;
|
||
|
|
+let uvNdx = 0;
|
||
|
|
for (const vertex of vertices) {
|
||
|
|
- positions.push(...vertex.pos);
|
||
|
|
- normals.push(...vertex.norm);
|
||
|
|
- uvs.push(...vertex.uv);
|
||
|
|
+ positions.set(vertex.pos, posNdx);
|
||
|
|
+ normals.set(vertex.norm, nrmNdx);
|
||
|
|
+ uvs.set(vertex.uv, uvNdx);
|
||
|
|
+ posNdx += positionNumComponents;
|
||
|
|
+ nrmNdx += normalNumComponents;
|
||
|
|
+ uvNdx += uvNumComponents;
|
||
|
|
}
|
||
|
|
|
||
|
|
geometry.setAttribute(
|
||
|
|
'position',
|
||
|
|
- new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
|
||
|
|
+ new THREE.BufferAttribute(positions, positionNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'normal',
|
||
|
|
- new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
|
||
|
|
+ new THREE.BufferAttribute(normals, normalNumComponents));
|
||
|
|
geometry.setAttribute(
|
||
|
|
'uv',
|
||
|
|
- new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
|
||
|
|
+ new THREE.BufferAttribute(uvs, uvNumComponents));
|
||
|
|
|
||
|
|
geometry.setIndex([
|
||
|
|
0, 1, 2, 2, 1, 3, // front
|
||
|
|
4, 5, 6, 6, 5, 7, // right
|
||
|
|
8, 9, 10, 10, 9, 11, // back
|
||
|
|
12, 13, 14, 14, 13, 15, // left
|
||
|
|
16, 17, 18, 18, 17, 19, // top
|
||
|
|
20, 21, 22, 22, 21, 23, // bottom
|
||
|
|
]);
|
||
|
|
</pre>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube-typedarrays.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-typedarrays.html" target="_blank">click here to open in a separate window</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p>A good reason to use typedarrays is if you want to dynamically update any
|
||
|
|
part of the vertices.</p>
|
||
|
|
<p>I couldn't think of a really good example of dynamically updating the vertices
|
||
|
|
so I decided to make a sphere and move each quad in and out from the center. Hopefully
|
||
|
|
it's a useful example.</p>
|
||
|
|
<p>Here's the code to generate positions and indices for a sphere. The code
|
||
|
|
is sharing vertices within a quad but it's not sharing vertices between
|
||
|
|
quads because we want to be able to move each quad separately.</p>
|
||
|
|
<p>Because I'm lazy I used a small hierarchy of 3 <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> objects to compute
|
||
|
|
sphere points. How this works is explained in <a href="optimize-lots-of-objects.html">the article on optimizing lots of objects</a>.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeSpherePositions(segmentsAround, segmentsDown) {
|
||
|
|
const numVertices = segmentsAround * segmentsDown * 6;
|
||
|
|
const numComponents = 3;
|
||
|
|
const positions = new Float32Array(numVertices * numComponents);
|
||
|
|
const indices = [];
|
||
|
|
|
||
|
|
const longHelper = new THREE.Object3D();
|
||
|
|
const latHelper = new THREE.Object3D();
|
||
|
|
const pointHelper = new THREE.Object3D();
|
||
|
|
longHelper.add(latHelper);
|
||
|
|
latHelper.add(pointHelper);
|
||
|
|
pointHelper.position.z = 1;
|
||
|
|
const temp = new THREE.Vector3();
|
||
|
|
|
||
|
|
function getPoint(lat, long) {
|
||
|
|
latHelper.rotation.x = lat;
|
||
|
|
longHelper.rotation.y = long;
|
||
|
|
longHelper.updateMatrixWorld(true);
|
||
|
|
return pointHelper.getWorldPosition(temp).toArray();
|
||
|
|
}
|
||
|
|
|
||
|
|
let posNdx = 0;
|
||
|
|
let ndx = 0;
|
||
|
|
for (let down = 0; down < segmentsDown; ++down) {
|
||
|
|
const v0 = down / segmentsDown;
|
||
|
|
const v1 = (down + 1) / segmentsDown;
|
||
|
|
const lat0 = (v0 - 0.5) * Math.PI;
|
||
|
|
const lat1 = (v1 - 0.5) * Math.PI;
|
||
|
|
|
||
|
|
for (let across = 0; across < segmentsAround; ++across) {
|
||
|
|
const u0 = across / segmentsAround;
|
||
|
|
const u1 = (across + 1) / segmentsAround;
|
||
|
|
const long0 = u0 * Math.PI * 2;
|
||
|
|
const long1 = u1 * Math.PI * 2;
|
||
|
|
|
||
|
|
positions.set(getPoint(lat0, long0), posNdx); posNdx += numComponents;
|
||
|
|
positions.set(getPoint(lat1, long0), posNdx); posNdx += numComponents;
|
||
|
|
positions.set(getPoint(lat0, long1), posNdx); posNdx += numComponents;
|
||
|
|
positions.set(getPoint(lat1, long1), posNdx); posNdx += numComponents;
|
||
|
|
|
||
|
|
indices.push(
|
||
|
|
ndx, ndx + 1, ndx + 2,
|
||
|
|
ndx + 2, ndx + 1, ndx + 3,
|
||
|
|
);
|
||
|
|
ndx += 4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {positions, indices};
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p>We can then call it like this</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const segmentsAround = 24;
|
||
|
|
const segmentsDown = 16;
|
||
|
|
const {positions, indices} = makeSpherePositions(segmentsAround, segmentsDown);
|
||
|
|
</pre>
|
||
|
|
<p>Because positions returned are unit sphere positions so they are exactly the same
|
||
|
|
values we need for normals so we can just duplicated them for the normals.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const normals = positions.slice();
|
||
|
|
</pre>
|
||
|
|
<p>And then we setup the attributes like before</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.BufferGeometry();
|
||
|
|
const positionNumComponents = 3;
|
||
|
|
const normalNumComponents = 3;
|
||
|
|
|
||
|
|
+const positionAttribute = new THREE.BufferAttribute(positions, positionNumComponents);
|
||
|
|
+positionAttribute.setUsage(THREE.DynamicDrawUsage);
|
||
|
|
geometry.setAttribute(
|
||
|
|
'position',
|
||
|
|
+ positionAttribute);
|
||
|
|
geometry.setAttribute(
|
||
|
|
'normal',
|
||
|
|
new THREE.BufferAttribute(normals, normalNumComponents));
|
||
|
|
geometry.setIndex(indices);
|
||
|
|
</pre>
|
||
|
|
<p>I've highlighted a few differences. We save a reference to the position attribute.
|
||
|
|
We also mark it as dynamic. This is a hint to THREE.js that we're going to be changing
|
||
|
|
the contents of the attribute often.</p>
|
||
|
|
<p>In our render loop we update the positions based off their normals every frame.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const temp = new THREE.Vector3();
|
||
|
|
|
||
|
|
...
|
||
|
|
|
||
|
|
for (let i = 0; i < positions.length; i += 3) {
|
||
|
|
const quad = (i / 12 | 0);
|
||
|
|
const ringId = quad / segmentsAround | 0;
|
||
|
|
const ringQuadId = quad % segmentsAround;
|
||
|
|
const ringU = ringQuadId / segmentsAround;
|
||
|
|
const angle = ringU * Math.PI * 2;
|
||
|
|
temp.fromArray(normals, i);
|
||
|
|
temp.multiplyScalar(THREE.MathUtils.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
|
||
|
|
temp.toArray(positions, i);
|
||
|
|
}
|
||
|
|
positionAttribute.needsUpdate = true;
|
||
|
|
</pre>
|
||
|
|
<p>And we set <code class="notranslate" translate="no">positionAttribute.needsUpdate</code> to tell THREE.js to use our changes.</p>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-dynamic.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/custom-buffergeometry-dynamic.html" target="_blank">click here to open in a separate window</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p>I hope these were useful examples of how to use <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> directly to
|
||
|
|
make your own geometry and how to dynamically update the contents of a
|
||
|
|
<a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>.</p>
|
||
|
|
<!-- needed in English only to prevent warning from outdated translations -->
|
||
|
|
<p><a href="resources/threejs-geometry.svg"></a>
|
||
|
|
<a href="custom-geometry.html"></a></p>
|
||
|
|
<p><canvas id="c"></canvas></p>
|
||
|
|
<script type="module" src="../resources/threejs-custom-buffergeometry.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/manual/resources/prettify.js"></script>
|
||
|
|
<script src="/manual/resources/lesson.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body></html>
|