threejs-geometry

1# Three.js Geometry
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16 
17const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
18camera.position.set(0, 0, 5);
19 
20// A geometry is the shape; many meshes can share one geometry instance
21const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
22scene.add(mesh);
23 
24renderer.setAnimationLoop(animate);
25 
26function animate() {
27  mesh.rotation.y += 0.01;
28  renderer.render(scene, camera);
29}
30```
31 
32## Built-in Geometries
33 
34### Basic Shapes
35 
36```javascript
37new THREE.BoxGeometry(1, 1, 1); // width, height, depth, widthSegments, heightSegments, depthSegments
38new THREE.SphereGeometry(1, 32, 16); // radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength
39new THREE.SphereGeometry(1, 32, 16, 0, Math.PI); // half sphere (phi sweep, cut through the poles)
40new THREE.SphereGeometry(1, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2); // dome (cut at the equator)
41new THREE.PlaneGeometry(10, 10, 1, 1); // width, height, widthSegments, heightSegments
42…