1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>EdgesHelper.js - Documentation</title>
|
6 |
|
7 | <script src="scripts/prettify/prettify.js"></script>
|
8 | <script src="scripts/prettify/lang-css.js"></script>
|
9 | |
10 |
|
11 |
|
12 | <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
13 | <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
14 | <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
15 | </head>
|
16 | <body>
|
17 |
|
18 | <input type="checkbox" id="nav-trigger" class="nav-trigger" />
|
19 | <label for="nav-trigger" class="navicon-button x">
|
20 | <div class="navicon"></div>
|
21 | </label>
|
22 |
|
23 | <label for="nav-trigger" class="overlay"></label>
|
24 |
|
25 | <nav>
|
26 | <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EdgesHelper.html">EdgesHelper</a><ul class='methods'><li data-type='method'><a href="EdgesHelper.html#.AddEdges">AddEdges</a></li></ul></li><li><a href="FluxCameras.html">FluxCameras</a><ul class='methods'><li data-type='method'><a href="FluxCameras.html#.cameraFromJSON">cameraFromJSON</a></li><li data-type='method'><a href="FluxCameras.html#.cameraToJSON">cameraToJSON</a></li><li data-type='method'><a href="FluxCameras.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxCameras.html#getCamera">getCamera</a></li><li data-type='method'><a href="FluxCameras.html#setView">setView</a></li><li data-type='method'><a href="FluxCameras.html#toJSON">toJSON</a></li><li data-type='method'><a href="FluxCameras.html#updateCamera">updateCamera</a></li></ul></li><li><a href="FluxRenderContext.html">FluxRenderContext</a><ul class='methods'><li data-type='method'><a href="FluxRenderContext.html#.getNextContext">getNextContext</a></li></ul></li><li><a href="FluxRenderer.html">FluxRenderer</a><ul class='methods'><li data-type='method'><a href="FluxRenderer.html#addControls">addControls</a></li><li data-type='method'><a href="FluxRenderer.html#anyValidPrims">anyValidPrims</a></li><li data-type='method'><a href="FluxRenderer.html#detach">detach</a></li><li data-type='method'><a href="FluxRenderer.html#doRender">doRender</a></li><li data-type='method'><a href="FluxRenderer.html#focus">focus</a></li><li data-type='method'><a href="FluxRenderer.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxRenderer.html#getGlCanvas">getGlCanvas</a></li><li data-type='method'><a href="FluxRenderer.html#getSelection">getSelection</a></li><li data-type='method'><a href="FluxRenderer.html#homeCamera">homeCamera</a></li><li data-type='method'><a href="FluxRenderer.html#setClearColor">setClearColor</a></li><li data-type='method'><a href="FluxRenderer.html#setEdgesMode">setEdgesMode</a></li><li data-type='method'><a href="FluxRenderer.html#setHelpersVisible">setHelpersVisible</a></li><li data-type='method'><a href="FluxRenderer.html#setLights">setLights</a></li><li data-type='method'><a href="FluxRenderer.html#setModel">setModel</a></li><li data-type='method'><a href="FluxRenderer.html#setSelection">setSelection</a></li><li data-type='method'><a href="FluxRenderer.html#setSelectionMaterial">setSelectionMaterial</a></li><li data-type='method'><a href="FluxRenderer.html#setSize">setSize</a></li><li data-type='method'><a href="FluxRenderer.html#setView">setView</a></li><li data-type='method'><a href="FluxRenderer.html#toJSON">toJSON</a></li></ul></li><li><a href="FluxViewport.html">FluxViewport</a><ul class='methods'><li data-type='method'><a href="FluxViewport.html#.getChangeEvent">getChangeEvent</a></li><li data-type='method'><a href="FluxViewport.html#.getEdgesModes">getEdgesModes</a></li><li data-type='method'><a href="FluxViewport.html#.getEvents">getEvents</a></li><li data-type='method'><a href="FluxViewport.html#.getSelectionModes">getSelectionModes</a></li><li data-type='method'><a href="FluxViewport.html#.getViews">getViews</a></li><li data-type='method'><a href="FluxViewport.html#.isKnownGeom">isKnownGeom</a></li><li data-type='method'><a href="FluxViewport.html#activateShadows">activateShadows</a></li><li data-type='method'><a href="FluxViewport.html#addControls">addControls</a></li><li data-type='method'><a href="FluxViewport.html#downloadState">downloadState</a></li><li data-type='method'><a href="FluxViewport.html#focus">focus</a></li><li data-type='method'><a href="FluxViewport.html#fromJSON">fromJSON</a></li><li data-type='method'><a href="FluxViewport.html#getAutoFocus">getAutoFocus</a></li><li data-type='method'><a href="FluxViewport.html#getGlCanvas">getGlCanvas</a></li><li data-type='method'><a href="FluxViewport.html#getJson">getJson</a></li><li data-type='method'><a href="FluxViewport.html#getObjectMap">getObjectMap</a></li><li data-type='method'><a href="FluxViewport.html#getSelection">getSelection</a></li><li data-type='method'><a href="FluxViewport.html#homeCamera">homeCamera</a></li><li data-type='method'><a href="FluxViewport.html#render">render</a></li><li data-type='method'><a href="FluxViewport.html#setAutoFocus">setAutoFocus</a></li><li data-type='method'><a href="FluxViewport.html#setClearColor">setClearColor</a></li><li data-type='method'><a href="FluxViewport.html#setEdgesMode">setEdgesMode</a></li><li data-type='method'><a href="FluxViewport.html#setFogDensity">setFogDensity</a></li><li data-type='method'><a href="FluxViewport.html#setGeometryEntity">setGeometryEntity</a></li><li data-type='method'><a href="FluxViewport.html#setGeometryJson">setGeometryJson</a></li><li data-type='method'><a href="FluxViewport.html#setHelpersVisible">setHelpersVisible</a></li><li data-type='method'><a href="FluxViewport.html#setSelection">setSelection</a></li><li data-type='method'><a href="FluxViewport.html#setSelectionMaterial">setSelectionMaterial</a></li><li data-type='method'><a href="FluxViewport.html#setSize">setSize</a></li><li data-type='method'><a href="FluxViewport.html#setTessUrl">setTessUrl</a></li><li data-type='method'><a href="FluxViewport.html#setupDefaultLighting">setupDefaultLighting</a></li><li data-type='method'><a href="FluxViewport.html#setView">setView</a></li><li data-type='method'><a href="FluxViewport.html#toJSON">toJSON</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#_deleteFromScene">_deleteFromScene</a></li><li><a href="global.html#_removeGeometries">_removeGeometries</a></li></ul>
|
27 | </nav>
|
28 |
|
29 | <div id="main">
|
30 |
|
31 | <h1 class="page-title">EdgesHelper.js</h1>
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | <section>
|
40 | <article>
|
41 | <pre class="prettyprint source linenums"><code>'use strict';
|
42 |
|
43 | import * as THREE from 'three';
|
44 |
|
45 | /**
|
46 | * Whether to draw edges on front and back faces.
|
47 | * Values are NONE, FRONT, BACK, BOTH.
|
48 | */
|
49 | EdgesHelper.EDGES_MODES = {
|
50 | NONE: 0,
|
51 | FRONT: 1,
|
52 | BACK: 2,
|
53 | BOTH: 3
|
54 | };
|
55 |
|
56 | /**
|
57 | * Create an object to render the edges of a mesh
|
58 | * @private
|
59 | * @param {Three.Mesh} mesh The mesh to convert
|
60 | * @param {Three.Material} material The material on the mesh
|
61 | * @return {Three.EdgesHelper} The edges object
|
62 | */
|
63 | var _createEdges = function(mesh, material) {
|
64 | var helper = new THREE.EdgesHelper(mesh);
|
65 | helper.material = material;
|
66 | helper.matrixAutoUpdate = false;
|
67 | helper.matrix = mesh.matrix;
|
68 | return helper;
|
69 | };
|
70 |
|
71 | /**
|
72 | * Create an object to render a mesh as edges
|
73 | * @class EdgesHelper
|
74 | * @param {Three.Object3D} model The mesh
|
75 | */
|
76 | export default function EdgesHelper(model) {
|
77 | THREE.Object3D.call( this );
|
78 | this.type = 'EdgesHelper';
|
79 |
|
80 | this.frontMaterial = new THREE.LineBasicMaterial({color: 0x000000});
|
81 | this.frontMaterial.depthFunc = THREE.LessEqualDepth;
|
82 |
|
83 | this.backMaterial = new THREE.LineBasicMaterial({color: 0x000000});
|
84 | this.backMaterial.transparent = true;
|
85 | this.backMaterial.depthFunc = THREE.GreaterDepth;
|
86 | this.backMaterial.opacity = 0.25;
|
87 |
|
88 | var _this = this;
|
89 | model.traverse(function(child) {
|
90 | if (child instanceof THREE.Mesh) {
|
91 | // create edge helper for front and back edges
|
92 | _this.add(
|
93 | _createEdges(child, _this.frontMaterial)
|
94 | );
|
95 | _this.add(
|
96 | _createEdges(child, _this.backMaterial)
|
97 | );
|
98 | }
|
99 | });
|
100 | }
|
101 |
|
102 | EdgesHelper.prototype = Object.create( THREE.Object3D.prototype );
|
103 | EdgesHelper.prototype.constructor = EdgesHelper;
|
104 |
|
105 | /**
|
106 | * Create the edges geometry for a model
|
107 | * @param {THREE.Object3D} newModel The model with edges
|
108 | * @param {EdgesHelper.EDGES_MODES} edgesMode Whether to draw edges enumeration
|
109 | * @return {EdgesHelper} The edges object
|
110 | */
|
111 | EdgesHelper.AddEdges = function(newModel, edgesMode) {
|
112 | if (edgesMode === EdgesHelper.EDGES_MODES.NONE) return null;
|
113 |
|
114 | newModel.edgesHelper = new EdgesHelper(newModel);
|
115 |
|
116 | newModel.edgesHelper.frontMaterial.visible = false;
|
117 | if (edgesMode === EdgesHelper.EDGES_MODES.FRONT || edgesMode === EdgesHelper.EDGES_MODES.BOTH) {
|
118 | newModel.edgesHelper.frontMaterial.visible = true;
|
119 | }
|
120 |
|
121 | newModel.edgesHelper.backMaterial.visible = false;
|
122 | if (edgesMode === EdgesHelper.EDGES_MODES.BACK || edgesMode === EdgesHelper.EDGES_MODES.BOTH) {
|
123 | newModel.edgesHelper.backMaterial.visible = true;
|
124 | }
|
125 | return newModel.edgesHelper;
|
126 | };</code></pre>
|
127 | </article>
|
128 | </section>
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | </div>
|
134 |
|
135 | <br class="clear">
|
136 |
|
137 | <footer>
|
138 | Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> on Thu Jan 05 2017 16:26:56 GMT-0800 (PST) using the Minami theme.
|
139 | </footer>
|
140 |
|
141 | <script>prettyPrint();</script>
|
142 | <script src="scripts/linenumber.js"></script>
|
143 | </body>
|
144 | </html>
|