draw.js
3.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import * as THREE from 'three';
import { Line2 } from 'three/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
export const drawTriangle = (pointa, pointb, pointc, color = 0xffa41e) => {
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
'position',
new THREE.Float32BufferAttribute(
[pointa.x, pointa.y, pointa.z, pointb.x, pointb.y, pointb.z, pointc.x, pointc.y, pointc.z],
3,
false
)
);
const material = new THREE.MeshBasicMaterial({
color: color,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};
export const drawFatLine = (positions, color, resolution, lineWidth, opacity, depthTest = true) => {
const geometry = new LineGeometry();
geometry.setPositions(positions);
const matrial = new LineMaterial({
color: color,
resolution: resolution,
dashed: true,
linewidth: lineWidth,
transparent: true,
opacity: opacity,
dashSize: 1,
gapSize: 0,
depthTest
});
const line = new Line2(geometry, matrial);
line.computeLineDistances();
return line;
};
export const drawFatDashLine = (positions, color, resolution) => {
const geometry = new LineGeometry();
geometry.setPositions(positions);
const matrial = new LineMaterial({
color: color,
resolution: resolution,
dashed: true,
linewidth: 1.8,
transparent: true,
opacity: 0.95,
dashSize: 0.7,
gapSize: 0.6
});
const line = new Line2(geometry, matrial);
line.computeLineDistances();
return line;
};
export const drawPoint = (point, color = 0x000000, radius = 0.1) => {
const geometry = new THREE.SphereGeometry(radius, 32, 16);
const material = new THREE.MeshBasicMaterial({ color: color });
const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(point.x, point.y, point.z);
return sphere;
};
export const drawCone = (color) => {
let geometry = new THREE.ConeGeometry(0.3, 0.7, 32, 10, false, 5, 7);
const material = new THREE.MeshPhongMaterial({
color: color
});
let matrix = new THREE.Matrix4().makeTranslation(0, -0.3, 0);
geometry.applyMatrix4(matrix);
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};
export const drawCircle = (radius, color = 0x5b5b5b) => {
const geometry = new THREE.CircleGeometry(radius, 32);
const material = new THREE.MeshBasicMaterial({
color: color,
transparent: true,
opacity: 0.7,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};
export const drawTorusOutline = (radius, color = 0x5b5b5b) => {
const geometry = new THREE.TorusGeometry(radius, 0.1, 16, 100);
const material = new THREE.MeshBasicMaterial({ color: color, transparent: true });
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};