-
Notifications
You must be signed in to change notification settings - Fork 1
/
PointCloud.html
140 lines (125 loc) · 6.05 KB
/
PointCloud.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/threejs/three.js"></script>
<script type="text/javascript" src="../js/libs/stats.min.js"></script>
<script type="text/javascript" src="../js/libs/dat.gui.min.js"></script>
<script type="text/javascript">
var scene, camera, renderer, spot1, stats;
var clock = new THREE.Clock();//时钟
// var cameraControls;
var cloud, controls;
function init() {
stats = new initStats();//初始化检测帧频
scene = new THREE.Scene();//场景
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机
camera.position.set(0, 0, 150);//相机位置
scene.add(camera);//add到场景中
spot1 = new THREE.SpotLight(0xffffff, 1);//点光源
spot1.position.set(100, 200, 100);
scene.add(spot1);
renderer = new THREE.WebGLRenderer({antialias: true});//渲染
renderer.setClearColor(0x00000);//设置可以认为是底图的颜色
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;//shadow，阴影，表明能渲染阴影
// cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);//相机控制器
// cameraControls.target.set(0, 0, 0);//控制器始终指向原点
document.getElementById('webGL_output').appendChild(renderer.domElement);//将渲染Element添加到Dom中
/*
控制器，用于选择创建粒子的数量大小等
*/
controls = new function () {
this.createNums = 5000;//默认创建5000个粒子
this.size = 4;//默认大小
this.transparent = true;//透明的
this.opacity = 0.6;//不透明
this.vertexColors = true;//坐标点集颜色
this.color = 0xffffff;//控制器本身颜色
this.sizeAttenuation = true;//如果为false 则所有粒子拥有相同的尺寸。无论距离相机多远
this.rotateSystem = true;//是否旋转
this.rotateSpeed = 0.005;//默认旋转速度
this.redraw = function () {
if (scene.getObjectByName('particles')) {
scene.remove(scene.getObjectByName('particles'));
}//存在则清除，然后重制
createParticles(controls.createNums, controls.size, controls.transparent, controls.opacity, controls.vertexColors, controls.sizeAttenuation, controls.color);
}
};
var gui = new dat.GUI();
gui.add(controls, 'createNums', 1, 10000).onChange(controls.redraw);//创建粒子数由1到10000个
gui.add(controls, 'size', 0, 10).onChange(controls.redraw);//大小0——10
gui.add(controls, 'transparent').onChange(controls.redraw);
gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
gui.add(controls, 'vertexColors').onChange(controls.redraw);
gui.addColor(controls, 'color').onChange(controls.redraw);
gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
gui.add(controls, 'rotateSystem').onChange(controls.redraw);
gui.add(controls, 'rotateSpeed', 0.001, 0.01).onChange(controls.redraw);
controls.redraw();
render();
}
/*
将检测帧频显示在左上方。
*/
function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('stats_output').appendChild(stats.domElement);
return stats;
}
/*
该函数用于生成粒子
*/
function createParticles(createNums, size, transparent, opacity, vertexColors, sizeAttenuation, color) {
//几何体
var geom = new THREE.Geometry();
//粒子系统材质，
var material = new THREE.PointCloudMaterial({
size: size,
transparent: transparent,
opacity: opacity,
vertexColors: vertexColors,
sizeAttenuation: sizeAttenuation,
blending:true,
color: color
});
var range = 500;
for (var i = 0; i < createNums; i++) {
var particle = new THREE.Vector3(Math.random() * range - range / 2,
Math.random() * range - range / 2, Math.random() * range - range / 2);
geom.vertices.push(particle);//点加入
var color = new THREE.Color(0x00ff00);//默认,关于颜色的设置只在vertexColors设置为true时使用
color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
geom.colors.push(color);//颜色加入
}
cloud = new THREE.PointCloud(geom, material);//粒子云系统
cloud.name = 'particles';//命名名字，在重绘的时候使用
scene.add(cloud);
}
var step = 0;
function render() {
stats.update();
if (controls.rotateSystem) {
step += controls.rotateSpeed;
cloud.rotation.x = step;
// cloud.rotation.y = step;
cloud.rotation.z = step;
}//旋转起来
requestAnimationFrame(render);//html5的方法，用于绘制一次动画帧
var delta = clock.getDelta();//根据鼠标拉扯，相机旋转
// cameraControls.update(delta);
renderer.render(scene, camera);
}
window.onload = init;
</script>
</head>
<body>
<div id="stats_output"></div>
<div id="webGL_output"></div>
</body>
</html>