/
ObjectLoader.html
236 lines (198 loc) · 7.65 KB
/
ObjectLoader.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JSON模型加载案例</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) {
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 draw() {
initRender();
initScene();
initCamera();
initLight();
initStats();
initGui();
initControl();
animate();
window.onresize = onWindowResize;
}
</script>
</html>