-
Notifications
You must be signed in to change notification settings - Fork 152
/
raycaster.html
280 lines (232 loc) · 9.79 KB
/
raycaster.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>点击事件案例</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="../js/three.js"></script>
<script src="../js/controls/OrbitControls.js"></script>
<script src="../js/stats.min.js"></script>
<script src="../js/dat.gui.min.js"></script>
<script>
var renderer, camera, scene, gui, stats, ambientLight, directionalLight, control;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
function initScene() {
scene = new THREE.Scene();
}
function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
createScene: function () {
//首先先删除掉当前场景所含有的立方体
deleteGroup("group");
//创建一个新的模型组
let group = new THREE.Group();
group.name = "group";
let geometry = new THREE.BoxGeometry(10, 10, 10);
for (let i = 0; i < 30; i++) {
let material = new THREE.MeshLambertMaterial({color: randomColor()});
let mesh = new THREE.Mesh(geometry, material);
//随机位置
mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200));
group.add(mesh);
}
scene.add(group);
},
exporterScene: function () {
//首先将场景转成json对象
let group = scene.getObjectByName("group");
if (!group) return;
let obj = group.toJSON();
//将json对象转成json字符串并存储
download("file.json", JSON.stringify(obj));
},
importerScene: function () {
//创建一个input来获取json数据
let input = document.createElement("input");
input.type = "file";
input.addEventListener("change", function () {
let file = input.files[0];
//判断是否是json格式的文件
if (file.type.indexOf("json") >= 0) {
//首先先删除掉当前场景所含有的立方体
deleteGroup("group");
//读取文件内的内容
let reader = new FileReader();
reader.readAsText(file);
reader.onloadend = function () {
//使用three.js的JSONLoader将模型导入到场景
let loader = new THREE.ObjectLoader();
let group = loader.parse(JSON.parse(this.result));
scene.add(group);
}
}
});
input.click();
},
loaderScene: function () {
//首先先删除掉当前场景所含有的立方体
deleteGroup("group");
//使用JSONLoader加载json格式文件
let loader = new THREE.ObjectLoader();
loader.load("../js/models/json/file.json", function (group) {
console.log(group);
scene.add(group);
});
}
};
var datGui = new dat.GUI();
//将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
datGui.add(gui, "createScene").name("添加模型");
datGui.add(gui, "exporterScene").name("导出模型");
datGui.add(gui, "importerScene").name("导入模型");
datGui.add(gui, "loaderScene").name("加载模型");
gui.loaderScene();
}
//随机颜色
function randomColor() {
var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
strHex = "#",
index;
for (var i = 0; i < 6; i++) {
index = Math.round(Math.random() * 15);
strHex += arrHex[index];
}
return strHex;
}
//保存文件
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
//删除group
function deleteGroup(name) {
let group = scene.getObjectByName(name);
if (!group) return;
//删除掉所有的模型组内的mesh
group.traverse(function (item) {
if (item instanceof THREE.Mesh) {
item.geometry.dispose(); //删除几何体
item.material.dispose(); //删除材质
}
});
scene.remove(group);
}
function initLight() {
ambientLight = new THREE.AmbientLight("#111111");
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight("#ffffff");
directionalLight.position.set(40, 60, 10);
directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
directionalLight.shadow.camera.right = 50; //最右边
directionalLight.shadow.camera.top = 50; //最上边
directionalLight.shadow.camera.bottom = -50; //最下面
//这两个值决定生成阴影密度 默认512
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.mapSize.width = 1024;
//告诉平行光需要开启阴影投射
directionalLight.castShadow = true;
scene.add(directionalLight);
}
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
function initControl() {
control = new THREE.OrbitControls(camera, renderer.domElement);
}
function render() {
control.update();
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function addTouch() {
function onMouseClick(event) {
//声明射线和mouse变量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
//通过鼠标点击的位置计算出射线所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//根据在屏幕的二维位置以及相机的矩阵更新射线的位置
raycaster.setFromCamera(mouse, camera);
// 获取射线直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects(scene.children, true); //增加第二个参数,可以遍历子子孙孙对象
//intersects是返回的一个数组,如果当前位置没有可选中的对象,那这个数组为空,否则为多个对象组成的数组,排列顺序为距离屏幕的距离从近到远的顺序排列
//数组的每一个子对象内包含:
// distance:距离屏幕的距离
// face:与射线相交的模型的面
// faceIndex:与射线相交的模型的面的下标
// object:与射线相交的模型对象
// point:射线与模型相交的点的位置坐标
// uv:与射线相交的模型的面的uv映射位置
console.log(intersects);
//将所有的相交的模型的颜色设置为红色,如果只需要将第一个触发事件,那就数组的第一个模型改变颜色即可
/*for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}*/
//判断当前数组是否为空,不为空则获取最近的的模型,将其颜色修改为红色
if(intersects.length > 0){
intersects[0].object.material.color.set(0xff0000);
}
}
document.addEventListener("click", onMouseClick, false);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initStats();
initGui();
initControl();
addTouch();
animate();
window.onresize = onWindowResize;
}
</script>
</html>