1 | 'use strict';
|
2 |
|
3 | import * as THREE from 'three';
|
4 | import EdgesHelper from './EdgesHelper.js';
|
5 | import FluxCameras from './FluxCameras.js';
|
6 | import FluxHelpers from './helpers/FluxHelpers.js';
|
7 | import FluxRenderContext from './FluxRenderContext.js';
|
8 | import CameraControls from './controls/CameraControls.js';
|
9 | import SelectionControls from './controls/SelectionControls.js';
|
10 | import * as constants from './controls/constants.js';
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | export default function FluxRenderer(domParent, width, height, selection) {
|
22 | this.id = FluxRenderer.nextId++;
|
23 |
|
24 |
|
25 | this._domParent = domParent;
|
26 |
|
27 |
|
28 | this._model = null;
|
29 |
|
30 |
|
31 | this._lights = null;
|
32 |
|
33 |
|
34 |
|
35 | this._context = FluxRenderContext.getNewContext();
|
36 |
|
37 | this._width = width;
|
38 | this._height = height;
|
39 |
|
40 | this._createCacheCanvas(width, height);
|
41 |
|
42 | this.setClearColor(0xC5CDCC);
|
43 |
|
44 | this._cameras = new FluxCameras(width, height);
|
45 | this._helpers = new FluxHelpers();
|
46 | this._helpersScene = new THREE.Scene();
|
47 | this._helpersScene.add(this._helpers);
|
48 |
|
49 |
|
50 | this._scene = new THREE.Scene();
|
51 |
|
52 | this._controls = [];
|
53 |
|
54 | var _this = this;
|
55 | this._editorControls = this.addControls(CameraControls);
|
56 | this._editorControls.addEventListener(constants.Events.CHANGE, function(event) {
|
57 | _this._cameras.updateCamera(_this._width, _this._height);
|
58 | _this.dispatchEvent(event);
|
59 | });
|
60 | this._selectionControls = this.addControls(SelectionControls);
|
61 | this._selectionControls.setMode(selection);
|
62 |
|
63 |
|
64 | this._fog = new THREE.FogExp2( this._clearColor, 0.0 );
|
65 | this._scene.fog = this._fog;
|
66 |
|
67 |
|
68 | this._edgesScene = new THREE.Scene();
|
69 | this._edgesMode = EdgesHelper.EDGES_MODES.NONE;
|
70 | }
|
71 |
|
72 | FluxRenderer.prototype = Object.create( THREE.EventDispatcher.prototype );
|
73 | FluxRenderer.prototype.constructor = FluxRenderer;
|
74 |
|
75 |
|
76 | FluxRenderer.nextId = 0;
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 | FluxRenderer.prototype.setLights = function(lights) {
|
83 | if (this._lights) {
|
84 | this._scene.remove(this._lights);
|
85 | }
|
86 | this._lights = lights;
|
87 | this._scene.add(this._lights);
|
88 | };
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 | function _removeGeometries(obj) {
|
95 | if (obj.geometry) {
|
96 | obj.geometry.dispose();
|
97 | }
|
98 | }
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | function _deleteFromScene(scene, model) {
|
106 | if (!model || !scene) return;
|
107 | scene.remove(model);
|
108 | model.traverse(_removeGeometries);
|
109 | }
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 | FluxRenderer.prototype.addControls = function(CustomControls) {
|
118 | var customControls = new CustomControls(this._cameras.getCamera(), this._scene, this._domParent, this._width, this._height);
|
119 | var _this = this;
|
120 | customControls.addEventListener(constants.Events.CHANGE, function (event) {
|
121 | _this.dispatchEvent(event);
|
122 | });
|
123 | this._controls.push(customControls);
|
124 | return customControls;
|
125 | };
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | FluxRenderer.prototype.setSelectionMaterial = function(data) {
|
132 | this._selectionControls.setMaterial(data);
|
133 | };
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | FluxRenderer.prototype.getSelection = function() {
|
140 | return this._selectionControls.getSelection();
|
141 | };
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 | FluxRenderer.prototype.setSelection = function(object) {
|
148 | this._selectionControls.setSelection(object);
|
149 | };
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | FluxRenderer.prototype.setModel = function(model) {
|
157 | if (this._model) {
|
158 | _deleteFromScene(this._scene, this._model);
|
159 | _deleteFromScene(this._edgesScene, this._model.edgesHelper);
|
160 | }
|
161 | this._model = model;
|
162 | if (this._model) {
|
163 | this._scene.add(this._model);
|
164 | if (EdgesHelper.AddEdges(this._model, this._edgesMode)) {
|
165 | this._edgesScene.add(this._model.edgesHelper);
|
166 | }
|
167 | }
|
168 | };
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 | FluxRenderer.prototype.setEdgesMode = function(mode) {
|
175 | this._edgesMode = mode;
|
176 | };
|
177 |
|
178 |
|
179 |
|
180 |
|
181 | FluxRenderer.prototype.homeCamera = function() {
|
182 | this._editorControls.focus(this._helpers);
|
183 | };
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | FluxRenderer.prototype.focus = function(obj) {
|
191 | if (!this._model && !obj) return;
|
192 | if (obj) {
|
193 | this._editorControls.focus(obj);
|
194 | } else {
|
195 | var selection = this._selectionControls.getSelectionSphere();
|
196 | if (selection) {
|
197 | this._editorControls.focus(selection);
|
198 | } else {
|
199 | this._editorControls.focus(this._model);
|
200 | }
|
201 | }
|
202 |
|
203 | };
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 |
|
210 | FluxRenderer.prototype.setClearColor = function(color, alpha) {
|
211 | this._clearColor = new THREE.Color(color);
|
212 | this._clearAlpha = alpha;
|
213 | };
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 | FluxRenderer.prototype.setHelpersVisible = function(visible) {
|
221 | this._helpersScene.visible = !!visible;
|
222 | };
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 | FluxRenderer.prototype._createCacheCanvas = function(width, height) {
|
232 | if (this._cacheCanvas) return;
|
233 |
|
234 | this._cacheCanvas = document.createElement('canvas');
|
235 | this._cacheCanvas.width = width;
|
236 | this._cacheCanvas.height = height;
|
237 | this._cacheCanvas.style.position = 'absolute';
|
238 | this._cacheCanvas.style['user-select'] = 'none';
|
239 | this._cacheCanvas.style['-webkit-user-select'] = 'none';
|
240 | this._domParent.appendChild(this._cacheCanvas);
|
241 |
|
242 |
|
243 | this.ctx = this._cacheCanvas.getContext('2d');
|
244 | };
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | FluxRenderer.prototype.detach = function() {
|
250 | if (this._context && this._context.currentHost === this) {
|
251 | this._context.currentHost = null;
|
252 | }
|
253 | };
|
254 |
|
255 |
|
256 |
|
257 |
|
258 |
|
259 | FluxRenderer.prototype.setView = function(view) {
|
260 | this._cameras.setView(view);
|
261 | this._cameras.updateCamera(this._width, this._height);
|
262 |
|
263 | for (var i=0;i<this._controls.length;i++) {
|
264 | this._controls[i].setCamera(this._cameras.getCamera());
|
265 | }
|
266 | this._helpers.setView(view);
|
267 | };
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 | FluxRenderer.prototype._addRenderTargets = function() {
|
274 |
|
275 | this._depthTarget = new THREE.WebGLRenderTarget(
|
276 | window.innerWidth,
|
277 | window.innerHeight,
|
278 | {
|
279 | minFilter: THREE.NearestFilter,
|
280 | magFilter: THREE.NearestFilter,
|
281 | format: THREE.RGBAFormat
|
282 | }
|
283 | );
|
284 |
|
285 |
|
286 | this._normalTarget = this._depthTarget.clone();
|
287 | };
|
288 |
|
289 |
|
290 |
|
291 |
|
292 | FluxRenderer.prototype.doRender = function () {
|
293 | this._setHost();
|
294 | this._update();
|
295 | this._context.renderer.clear();
|
296 | this._context.renderer.render(this._scene, this._cameras.getCamera());
|
297 | this._context.renderer.render(this._edgesScene, this._cameras.getCamera());
|
298 | this._context.renderer.render(this._helpersScene, this._cameras.getCamera());
|
299 | };
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 | FluxRenderer.prototype.anyValidPrims = function() {
|
306 | return this._model ? this._model.children.length > 0 : false;
|
307 | };
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 | FluxRenderer.prototype._cacheImageToCanvas = function () {
|
316 | this.doRender();
|
317 | this.ctx.drawImage(this._context.renderer.domElement, 0, 0, this._cacheCanvas.width, this._cacheCanvas.height);
|
318 | };
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 | FluxRenderer.prototype.getGlCanvas = function() {
|
325 | return this._context.renderer.domElement;
|
326 | };
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 | FluxRenderer.prototype._setHost = function() {
|
334 | if (this === this._context.currentHost) return;
|
335 | if (this._context.currentHost) {
|
336 |
|
337 |
|
338 |
|
339 | this._context.currentHost._cacheImageToCanvas();
|
340 | }
|
341 | this._context.currentHost = this;
|
342 | this.setSize(this._width, this._height);
|
343 |
|
344 | this._domParent.appendChild(this._context.renderer.domElement);
|
345 | };
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 | FluxRenderer.prototype._update = function() {
|
352 | this._context.renderer.autoClearColor = false;
|
353 | this._context.renderer.autoClearDepth = false;
|
354 | this._context.renderer.setSize(this._width, this._height);
|
355 | this._context.renderer.setClearColor(this._clearColor, this._clearAlpha);
|
356 | };
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 | FluxRenderer.prototype.setSize = function(width, height) {
|
364 | if (width <= 0 || height <= 0 || (width === this._width && height === this.height)) return;
|
365 | this._width = width;
|
366 | this._height = height;
|
367 |
|
368 | this._cameras.updateCamera(this._width, this._height);
|
369 |
|
370 | for (var i=0;i<this._controls.length;i++) {
|
371 | this._controls[i].setSize(this._width, this._height);
|
372 | }
|
373 |
|
374 | this._cacheCanvas.height = height;
|
375 | this._cacheCanvas.width = width;
|
376 | };
|
377 |
|
378 |
|
379 |
|
380 |
|
381 |
|
382 | FluxRenderer.prototype.toJSON = function() {
|
383 | var serializableState = {
|
384 | cameras: this._cameras.toJSON(),
|
385 | controls: this._editorControls.toJSON()
|
386 | };
|
387 |
|
388 | return serializableState;
|
389 | };
|
390 |
|
391 |
|
392 |
|
393 |
|
394 |
|
395 | FluxRenderer.prototype.fromJSON = function(state) {
|
396 | if (!state) return;
|
397 | if (state.cameras != null) {
|
398 | this.setView(state.cameras.view);
|
399 | this._cameras.fromJSON(state.cameras);
|
400 | }
|
401 | if (state.controls) {
|
402 |
|
403 | this._editorControls.fromJSON(state.controls);
|
404 | }
|
405 | };
|