Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Improve BufferGeometry page. #25824

Merged
merged 6 commits into from
Apr 14, 2023
Merged

Docs: Improve BufferGeometry page. #25824

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
84debcc
docs(bufferGeometry): adding indexed version code example
abernier Apr 13, 2023
06d62ef
updating doc + adding 2 live examples
abernier Apr 13, 2023
bb9e8fd
Update BufferGeometry.html
abernier Apr 13, 2023
8a763e2
removing browser examples
abernier Apr 13, 2023
f98de46
fixing sentences
abernier Apr 13, 2023
ddc4c5c
Update BufferGeometry.html
Mugen87 Apr 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 40 additions & 6 deletions docs/api/en/core/BufferGeometry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,22 @@ <h1>[name]</h1>
[page:BufferAttribute] documentation.
</p>

<iframe id="scene" src="scenes/buffergeometry-browser.html"></iframe>

<h2>Code Example</h2>

<code>
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, -1.0, 1.0, // v0
1.0, -1.0, 1.0, // v1
1.0, 1.0, 1.0, // v2

1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
1.0, 1.0, 1.0, // v3
-1.0, 1.0, 1.0, // v4
-1.0, -1.0, 1.0 // v5
] );

// itemSize = 3 because there are 3 values (components) per vertex
Expand All @@ -40,6 +43,37 @@ <h2>Code Example</h2>
const mesh = new THREE.Mesh( geometry, material );
</code>

<p>Each three contiguous `vertices` positions represent a single triangle. Therefore, a same vertex can appears in multiple triangles, like: `1.0, 1.0, 1.0` (`v2`, `v3`) and `-1.0, -1.0, 1.0` (`v0`, `v5`).</p>
Mugen87 marked this conversation as resolved.
Show resolved Hide resolved

<h3>Indexed version</h3>

<p>Here, "triangles" are defined using vertices `indices` (see [link:#api/core/BufferGeometry.index .index]).</p>

<code>
const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array( [
-1.0, -1.0, 1.0, // 0
1.0, -1.0, 1.0, // 1
1.0, 1.0, 1.0, // 2
-1.0, 1.0, 1.0, // 3
] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

const indices = [
0, 1, 2, // triangle 1: "0, 1, 2"
2, 3, 0, // triangle 2: "2, 3, 0"
];
geometry.setIndex( indices );

const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
const mesh = new THREE.Mesh( geometry, material );
</code>

<p></p>

<iframe id="scene" src="scenes/buffergeometry-indexed-browser.html"></iframe>

<h2>Examples</h2>
<p>
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
Expand Down
132 changes: 132 additions & 0 deletions docs/scenes/buffergeometry-browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Three.js CCDIKSolver Browser</title>
<link rel="shortcut icon" href="../../files/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../../files/main.css">
<style>
canvas {
display: block;
width: 100%;
height: 100%;
}

#newWindow {
display: block;
position: absolute;
bottom: 0.3em;
left: 0.5em;
color: #fff;
}
</style>
</head>
<body>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"three": "../../build/three.module.js",
"three/addons/": "../../examples/jsm/"
}
}
</script>

<a id='newWindow' href='./buffergeometry-browser.html' target='_blank'>Open in New Window</a>

<script type="module">
abernier marked this conversation as resolved.
Show resolved Hide resolved
import {
Color,
ColorManagement,
PerspectiveCamera,
Scene,
WebGLRenderer,
BufferGeometry,
BufferAttribute,
MeshBasicMaterial,
Mesh
} from 'three';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

ColorManagement.enabled = true;

let gui, scene, camera, renderer, material;

function initScene() {

gui = new GUI();

scene = new Scene();
scene.background = new Color( 0x444444 );

camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.z = 5;

renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

window.addEventListener( 'resize', function () {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}, false );

initBufferGeometry();
setupDatGui();

}

function setupDatGui() {

gui.add( material, 'wireframe' );

}

function initBufferGeometry() {

const geometry = new BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
- 1.0, - 1.0, 1.0,
1.0, - 1.0, 1.0,
1.0, 1.0, 1.0,

1.0, 1.0, 1.0,
- 1.0, 1.0, 1.0,
- 1.0, - 1.0, 1.0
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
material = new MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
const mesh = new Mesh( geometry, material );

scene.add( mesh );

}

function render() {

requestAnimationFrame( render );

renderer.render( scene, camera );

}

initScene();
render();

</script>
</body>
</html>
134 changes: 134 additions & 0 deletions docs/scenes/buffergeometry-indexed-browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> .js CCDIKSolver Browser</title>
<link rel="shortcut icon" href="../../files/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../../files/main.css">
<style>
canvas {
display: block;
width: 100%;
height: 100%;
}

#newWindow {
display: block;
position: absolute;
bottom: 0.3em;
left: 0.5em;
color: #fff;
}
</style>
</head>
<body>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"three": "../../build/three.module.js",
"three/addons/": "../../examples/jsm/"
}
}
</script>

<a id='newWindow' href='./buffergeometry-browser.html' target='_blank'>Open in New Window</a>

<script type="module">
import {
Color,
ColorManagement,
PerspectiveCamera,
Scene,
WebGLRenderer,
BufferGeometry,
BufferAttribute,
MeshBasicMaterial,
Mesh
} from 'three';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

ColorManagement.enabled = true;

let gui, scene, camera, renderer, material;

function initScene() {

gui = new GUI();

scene = new Scene();
scene.background = new Color( 0x444444 );

camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
camera.position.z = 5;

renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

window.addEventListener( 'resize', function () {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}, false );

initBufferGeometry();
setupDatGui();

}

function setupDatGui() {

gui.add( material, 'wireframe' );

}

function initBufferGeometry() {

const geometry = new BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
- 1.0, - 1.0, 1.0,
1.0, - 1.0, 1.0,
1.0, 1.0, 1.0,
- 1.0, 1.0, 1.0,
] );
geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );

const indices = [
0, 1, 2, // triangle 1: "0, 1, 2"
2, 3, 0, // triangle 2: "2, 3, 0"
];
geometry.setIndex( indices );

material = new MeshBasicMaterial( { color: 0x00ffff, wireframe: true } );
const mesh = new Mesh( geometry, material );

scene.add( mesh );

}

function render() {

requestAnimationFrame( render );

renderer.render( scene, camera );

}

initScene();
render();

</script>
</body>
</html>