this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Reorganize

+41 -35
+40 -34
src/viewer.js
··· 140 140 this.gridHelper = null; 141 141 this.axesHelper = null; 142 142 143 - // https://stackoverflow.com/questions/16226693/three-js-show-world-coordinate-axes-in-corner-of-scene 144 - 145 - this.axisDiv = document.createElement('div'); 146 - this.el.appendChild( this.axisDiv ); 147 - this.axisDiv.classList.add('axis'); 148 - 149 - this.axisScene = new THREE.Scene(); 150 - this.axisCamera = new THREE.PerspectiveCamera( fov, this.axisDiv.clientWidth / this.axisDiv.clientHeight, 0.01, 10000 ); 151 - this.axisScene.add( this.axisCamera ); 152 - 153 - this.axisRenderer = new THREE.WebGLRenderer( { alpha: true } ); 154 - this.axisRenderer.setPixelRatio( window.devicePixelRatio ); 155 - this.axisRenderer.setSize( this.axisDiv.clientWidth, this.axisDiv.clientHeight ); 156 - 157 - this.axisCamera.up = this.defaultCamera.up; 158 - this.addAxisRenderer(); 143 + this.addAxesHelper(); 159 144 this.addGUI(); 160 145 if (options.kiosk) this.gui.close(); 161 146 ··· 183 168 184 169 this.renderer.render( this.scene, this.activeCamera ); 185 170 if (this.state.grid) { 186 - this.axisCamera.position.copy(this.defaultCamera.position) 187 - this.axisCamera.lookAt(this.axisScene.position) 188 - this.axisRenderer.render( this.axisScene, this.axisCamera ); 171 + this.axesCamera.position.copy(this.defaultCamera.position) 172 + this.axesCamera.lookAt(this.axesScene.position) 173 + this.axesRenderer.render( this.axesScene, this.axesCamera ); 189 174 } 190 175 } 191 176 ··· 198 183 this.vignette.style({aspect: this.defaultCamera.aspect}); 199 184 this.renderer.setSize(clientWidth, clientHeight); 200 185 201 - this.axisCamera.aspect = this.axisDiv.clientWidth / this.axisDiv.clientHeight; 202 - this.axisCamera.updateProjectionMatrix(); 203 - this.axisRenderer.setSize(this.axisDiv.clientWidth, this.axisDiv.clientHeight); 186 + this.axesCamera.aspect = this.axesDiv.clientWidth / this.axesDiv.clientHeight; 187 + this.axesCamera.updateProjectionMatrix(); 188 + this.axesRenderer.setSize(this.axesDiv.clientWidth, this.axesDiv.clientHeight); 204 189 } 205 190 206 191 load ( url, rootPath, assetMap ) { ··· 297 282 298 283 this.setCamera(DEFAULT_CAMERA); 299 284 300 - this.axisCamera.position.copy(this.defaultCamera.position) 301 - this.axisCamera.lookAt(this.axisScene.position) 302 - this.axisCamera.near = size / 100; 303 - this.axisCamera.far = size * 100; 304 - this.axisCamera.updateProjectionMatrix(); 305 - this.axisCorner.scale.set(size, size, size); 285 + this.axesCamera.position.copy(this.defaultCamera.position) 286 + this.axesCamera.lookAt(this.axesScene.position) 287 + this.axesCamera.near = size / 100; 288 + this.axesCamera.far = size * 100; 289 + this.axesCamera.updateProjectionMatrix(); 290 + this.axesCorner.scale.set(size, size, size); 306 291 307 292 this.controls.saveState(); 308 293 ··· 516 501 this.scene.remove(this.axesHelper); 517 502 this.gridHelper = null; 518 503 this.axesHelper = null; 519 - this.axisRenderer.clear(); 504 + this.axesRenderer.clear(); 520 505 } 521 506 } 522 507 } ··· 525 510 this.vignette.style({colors: [this.state.bgColor1, this.state.bgColor2]}); 526 511 } 527 512 528 - addAxisRenderer () { 529 - this.axisCorner = new THREE.AxesHelper(5); 530 - this.axisScene.add( this.axisCorner ); 531 - this.axisDiv.appendChild(this.axisRenderer.domElement); 513 + /** 514 + * Adds AxesHelper. 515 + * 516 + * See: https://stackoverflow.com/q/16226693/1314762 517 + */ 518 + addAxesHelper () { 519 + this.axesDiv = document.createElement('div'); 520 + this.el.appendChild( this.axesDiv ); 521 + this.axesDiv.classList.add('axes'); 522 + 523 + const {clientWidth, clientHeight} = this.axesDiv; 524 + 525 + this.axesScene = new Scene(); 526 + this.axesCamera = new PerspectiveCamera( 50, clientWidth / clientHeight, 0.1, 10 ); 527 + this.axesScene.add( this.axesCamera ); 528 + 529 + this.axesRenderer = new WebGLRenderer( { alpha: true } ); 530 + this.axesRenderer.setPixelRatio( window.devicePixelRatio ); 531 + this.axesRenderer.setSize( this.axesDiv.clientWidth, this.axesDiv.clientHeight ); 532 + 533 + this.axesCamera.up = this.defaultCamera.up; 534 + 535 + this.axesCorner = new AxesHelper(5); 536 + this.axesScene.add( this.axesCorner ); 537 + this.axesDiv.appendChild(this.axesRenderer.domElement); 532 538 } 533 - 539 + 534 540 addGUI () { 535 541 536 542 const gui = this.gui = new GUI({autoPlace: false, width: 260, hideable: true});
+1 -1
style.css
··· 55 55 z-index: 0; 56 56 } 57 57 58 - .axis { 58 + .axes { 59 59 width: 100px; 60 60 height: 100px; 61 61 margin: 20px;