# 图元

Three.js 有很多图元。图元就是一些 3D 的形状，在运行时根据大量参数生成。

2D 平面

2D 的三角轮廓

```const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xAAAAAA);
```

```-const fov = 75;
+const fov = 40;
const aspect = 2;  // canvas 默认
const near = 0.1;
-const far = 5;
+const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-camera.position.z = 2;
+camera.position.z = 120;
```

```const objects = [];

objects.push(obj);
}
```

```function createMaterial() {
const material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
});

const hue = Math.random();
const saturation = 1;
const luminance = .5;
material.color.setHSL(hue, saturation, luminance);

return material;
}
```

```function addSolidGeometry(x, y, geometry) {
const mesh = new THREE.Mesh(geometry, createMaterial());
}
```

```{
const width = 8;
const height = 8;
const depth = 8;
addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
}
```

```{
// 将字体加载过程 promise 化
return new Promise((resolve, reject) => {
});
}

async function doit() {
const font = await loadFont('resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejs.org: url */
const geometry = new TextGeometry('three.js', {
font: font,
size: 3.0,
height: .2,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.15,
bevelSize: .3,
bevelSegments: 5,
});
const mesh = new THREE.Mesh(geometry, createMaterial());
geometry.computeBoundingBox();
geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);

const parent = new THREE.Object3D();

}
doit();
}
```

```function addLineGeometry(x, y, geometry) {
const material = new THREE.LineBasicMaterial({color: 0x000000});
const mesh = new THREE.LineSegments(geometry, material);
}
```

```const radius = 7;
const widthSegments = 12;
const heightSegments = 8;
const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
const material = new THREE.PointsMaterial({
color: 'red',
size: 0.2,     // in world units
});
const points = new THREE.Points(geometry, material);
```

```const material = new THREE.PointsMaterial({
color: 'red',
+    sizeAttenuation: false,
+    size: 3,       // in pixels
-    size: 0.2,     // in world units
});
...
```