Showing
1 changed file
with
91 additions
and
0 deletions
components/xrviewer.js
0 → 100644
1 | + | ||
2 | +import ARCS from '../build/arcs.js'; | ||
3 | +import * as THREE from '../deps/three.js/index.js'; | ||
4 | +//import FrustumCamera from '../deps/three.js/frustumcamera.js'; | ||
5 | + | ||
6 | +var XRViewer; | ||
7 | + | ||
8 | +/** | ||
9 | + * @class ARViewer | ||
10 | + * @classdesc Simple compositing viewer for augmented reality | ||
11 | + */ | ||
12 | +XRViewer = ARCS.Component.create( | ||
13 | + /** @lends ARViewer.prototype */ | ||
14 | + function () { | ||
15 | + let renderer, scene3d, camera3d; | ||
16 | + let sceneId; | ||
17 | + | ||
18 | + | ||
19 | + // scenegraph initializations | ||
20 | + scene3d = new THREE.Scene(); | ||
21 | + | ||
22 | + /** | ||
23 | + * Initializes the widgets (HTML elements) needed as a basis | ||
24 | + * for the viewer. | ||
25 | + * @param cName {string} id of the container that will enclose the scene renderer | ||
26 | + * @param vName {string} id of the element at the source of the video stream | ||
27 | + * @slot | ||
28 | + * @function ARViewer#setWidgets | ||
29 | + */ | ||
30 | + this.setWidgets = function() { | ||
31 | + | ||
32 | + renderer = new THREE.WebGLRenderer(); | ||
33 | + renderer.setClearColor(0x000000, 1); | ||
34 | + renderer.setSize(container.width, container.height); | ||
35 | + container.appendChild(renderer.domElement); | ||
36 | + | ||
37 | + var theta = 45; | ||
38 | + camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10); | ||
39 | + scene3d.add(camera3d); | ||
40 | + | ||
41 | + var _light = new THREE.DirectionalLight(0xffffff); | ||
42 | + _light.position.set(0,5,5); | ||
43 | + | ||
44 | + scene3d.add(_light); | ||
45 | + updateAspectRatio(); | ||
46 | + }; | ||
47 | + | ||
48 | + /** | ||
49 | + * Adds new objects to the current 3D scene | ||
50 | + * @param scene {object} 3D object as defined by Three.js to add to the scene. | ||
51 | + * @slot | ||
52 | + * @function ARViewer#addScene | ||
53 | + */ | ||
54 | + this.addScene = function (scene) { | ||
55 | + scene3d.add(scene); | ||
56 | + }; | ||
57 | + | ||
58 | + /** | ||
59 | + * Removes an object from the current 3D scene | ||
60 | + * @param scene {object} 3D object as defined by Three.js to remove from the scene. | ||
61 | + * @slot | ||
62 | + * @function ARViewer#removeScene | ||
63 | + */ | ||
64 | + this.removeScene = function (scene) { | ||
65 | + scene3d.remove(scene); | ||
66 | + }; | ||
67 | + | ||
68 | + /** | ||
69 | + * Triggers the rendering of the composite scene | ||
70 | + * @function ARViewer#render | ||
71 | + * @slot | ||
72 | + */ | ||
73 | + this.render = function () { | ||
74 | + renderer.autoClear = false; | ||
75 | + renderer.clear(); | ||
76 | + renderer.render(scene3d, camera3d); | ||
77 | + } | ||
78 | + | ||
79 | + }, | ||
80 | + /** @lends ARViewer.slots */ | ||
81 | + [ | ||
82 | + 'setWidgets','setFocal','viewAll','setSize','addScene', | ||
83 | + 'resetCamera','removeScene','render','keepAspectRatio', | ||
84 | + 'setExtrinsics', 'setIntrinsics' | ||
85 | + | ||
86 | + ], | ||
87 | + [] | ||
88 | +); | ||
89 | + | ||
90 | +export default {XRViewer: XRViewer}; | ||
91 | + |
-
Please register or login to post a comment