-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlines.js
137 lines (89 loc) · 3.14 KB
/
lines.js
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
// 创建一个场景
var scene = new THREE.Scene();
// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 10);
// 创建一个渲染器
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
//
const controls = new OrbitControls(camera, renderer.domElement )
controls.update()
let textMesh
const loader = new FontLoader();
loader.load('./Alibaba PuHuiTi_Regular.json', function (font) {
// 创建文字几何体
const textGeometry = new TextGeometry('你好', {
font: font,
size: 1,
height: 0,
});
// 创建材质
const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 创建网格
textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.geometry.computeBoundingBox()
const textCenterOffset = textMesh.geometry.boundingBox.getCenter(new THREE.Vector3()).negate();
console.log(textCenterOffset,'PPPPPPPPP');
textMesh.translateX(textCenterOffset.x)
// 添加到场景
// scene.add(textMesh)
line.add(textMesh)
});
const labelPoints = [
new THREE.Vector3(-3, 0 ,0),
new THREE.Vector3(0, 0, 0)
]
const labelGeometry = new THREE.BufferGeometry().setFromPoints(labelPoints)
const lineMaterial = new THREE.LineBasicMaterial({color: 0xff0000})
const line = new THREE.Line(labelGeometry, lineMaterial)
line.translateX(10)
const cube = new THREE.Mesh(
new THREE.BoxGeometry(5, 3, 1),
new THREE.MeshBasicMaterial({color: 0xffff00, side: THREE.BackSide})
)
scene.add(cube)
cube.translateZ(-2)
cube.translateY(1.5)
cube.add(line)
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshBasicMaterial({color: 0xff0000})
);
const mesh2 = new THREE.Mesh(
new THREE.BoxGeometry(2, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xffff00 })
);
group.add(mesh1);
group.add(mesh2);
scene.add(group);
// 设置光线等...
renderer.domElement.addEventListener('pointerdown', function (event) {
const mouse = {}
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera)
const intersects = raycaster.intersectObjects([group], true);
if (intersects.length > 0) {
// 选中了 group 中的一个对象
console.log("Hit: ", intersects[0].object);
}
})
// 创建一个渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update()
renderer.render(scene, camera);
}
animate();