three.js: geometry, materials

docs/.vuepress/notes/en/theme-guide.ts

@@ -94,7 +94,7 @@ export const themeGuide = defineNoteConfig({
           icon: "mdi:api",
           collapsed: false,
           prefix: "three-js",
-          items: ["basic", "operation"],
+          items: ["basic", "operation", "geometry", "materials"],
         },
       ],
     },

docs/notes/guide/material/font-end/three-js/geometry.md

@@ -0,0 +1,104 @@
+---
+title: Geometry
+createTime: 2024/11/04 22:27:18
+permalink: /guide/materials/font-end/three-js/geometry/
+tags:
+  - three.js
+  - geometry
+---
+
+## BufferGeometry
+
+### Construct Geometry
+
+The front side of the geometry is oriented counterclockwise and is not visible from the back.
+
+```js
+const geometry = new THREE.BufferGeometry();
+const vertices = new Float32Array([
+  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0,
+]);
+geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+const triangle = new THREE.Mesh(geometry, material);
+scene.add(triangle);
+```
+
+If we want the geometry double sided:
+
+```js
+const material = new THREE.MeshBasicMaterial({
+  color: 0xff000,
+  side: THREE.DoubleSide,
+});
+```
+
+Rectangle:
+
+```js
+const geometry = new THREE.BufferGeometry();
+const vertices = new Float32Array([
+  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0,
+  -1.0, -1.0, 0.0,
+]);
+geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+const material = new THREE.MeshBasicMaterial({
+  color: 0xff000,
+  side: THREE.DoubleSide,
+  wireframe: true,
+});
+const triangle = new THREE.Mesh(geometry, material);
+scene.add(triangle);
+```
+
+As actually a cube only needs 24 vertices, some vertices should be shared with other triangles. The optimization is to use indices to construct rectangle:
+
+```js
+const geometry = new THREE.BufferGeometry();
+const vertices = new Float32Array([
+  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0,
+]);
+geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+const material = new THREE.MeshBasicMaterial({
+  color: 0xff000,
+  side: THREE.DoubleSide,
+  wireframe: true,
+});
+const triangle = new THREE.Mesh(geometry, material);
+scene.add(triangle);
+```
+
+### Apply different materials on triangles
+
+```js
+const geometry = new THREE.BufferGeometry();
+const vertices = new Float32Array([
+  -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0,
+]);
+geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+const indices = new Uint16Array([0, 1, 2, 2, 3, 0]);
+geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+geometry.addGroup(0, 3, 0);
+geometry.addGroup(3, 3, 1);
+
+const material = new THREE.MeshBasicMaterial({
+  color: 0xff0000,
+});
+const material2 = new THREE.MeshBasicMaterial({
+  color: 0xffff00,
+});
+const triangle = new THREE.Mesh(geometry, [material, material2]);
+scene.add(triangle);
+```
+
+<img src="/images/material/font-end/three-js/geometry-group.png" alt="Geometry Group" width = "500px">
+
+## Common Geometry
+
+- [BoxGeometry
+  ](https://threejs.org/docs/index.html?q=geometry#api/en/geometries/BoxGeometry)
+- [CapsuleGeometry](https://threejs.org/docs/index.html?q=geometry#api/en/geometries/CapsuleGeometry)
+
+- ...

docs/notes/guide/material/font-end/three-js/materials.md

@@ -0,0 +1,34 @@
+---
+title: Materials
+createTime: 2024/11/05 00:51:36
+permalink: /guide/8jvb/guide/materials/font-end/three-js/materials/
+tags:
+  - three.js
+  - materials
+---
+
+## Maps
+
+### Map
+
+A standard map that applies a texture to the geometry.
+
+### Alpha Map
+
+The black areas of the map are transparent, while the white areas are opaque.
+
+### Env Map
+
+Applies a texture to the entire environment, creating reflective or refractive effects.
+
+### Emissive Map
+
+An Emissive Map is a texture map used in 3D rendering and material processing to simulate the effect of an object emitting light. It allows specific parts of a model to appear as if they are glowing, even without external light sources.
+
+### Light Map
+
+A Light Map is a texture map used in 3D rendering to simulate lighting and shadows on a surface without real-time computation. Light maps are pre-baked textures that contain lighting information, which helps improve performance by reducing the need to calculate complex lighting in real time.
+
+### AO Map(Ambient Occlusion Map)
+
+An Ambient Occlusion (AO) Map is a texture used in 3D graphics to simulate how ambient lighting affects the crevices, corners, and folds of an object. It adds depth and realism by darkening areas where light would have a harder time reaching, such as small cracks or the spaces between objects.