vr.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. import {
  2. DebugTilesRenderer as TilesRenderer,
  3. NONE,
  4. SCREEN_ERROR,
  5. GEOMETRIC_ERROR,
  6. DISTANCE,
  7. DEPTH,
  8. RELATIVE_DEPTH,
  9. IS_LEAF,
  10. RANDOM_COLOR,
  11. } from '../src/index.js';
  12. import {
  13. Scene,
  14. DirectionalLight,
  15. AmbientLight,
  16. WebGLRenderer,
  17. PerspectiveCamera,
  18. Box3,
  19. Raycaster,
  20. Mesh,
  21. MeshBasicMaterial,
  22. Group,
  23. TorusBufferGeometry,
  24. sRGBEncoding,
  25. GridHelper,
  26. BufferGeometry,
  27. Float32BufferAttribute,
  28. LineBasicMaterial,
  29. AdditiveBlending,
  30. Line,
  31. Vector3,
  32. RingBufferGeometry,
  33. Sphere,
  34. } from 'three';
  35. import * as dat from 'three/examples/jsm/libs/dat.gui.module.js';
  36. import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
  37. import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory.js';
  38. let camera, scene, renderer, tiles;
  39. let workspace;
  40. let box, sphere, grid;
  41. let raycaster, fwdVector, intersectRing;
  42. let offsetParent;
  43. let controller, controllerGrip;
  44. let params = {
  45. 'displayBoxBounds': false,
  46. 'colorMode': 0,
  47. 'displayGrid': true,
  48. };
  49. init();
  50. animate();
  51. function init() {
  52. scene = new Scene();
  53. // primary camera view
  54. renderer = new WebGLRenderer( { antialias: true } );
  55. renderer.setPixelRatio( window.devicePixelRatio );
  56. renderer.setSize( window.innerWidth, window.innerHeight );
  57. renderer.setClearColor( 0x151c1f );
  58. renderer.outputEncoding = sRGBEncoding;
  59. renderer.xr.enabled = true;
  60. document.body.appendChild( renderer.domElement );
  61. renderer.domElement.tabIndex = 1;
  62. // create workspace
  63. workspace = new Group();
  64. scene.add( workspace );
  65. grid = new GridHelper( 10, 10, 0xffffff, 0xffffff );
  66. grid.material.transparent = true;
  67. grid.material.opacity = 0.5;
  68. grid.material.depthWrite = false;
  69. workspace.add( grid );
  70. camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 4000 );
  71. camera.position.set( 0, 1, 0 );
  72. workspace.add( camera );
  73. // lights
  74. const dirLight = new DirectionalLight( 0xffffff );
  75. dirLight.position.set( 1, 2, 3 );
  76. scene.add( dirLight );
  77. const ambLight = new AmbientLight( 0xffffff, 0.2 );
  78. scene.add( ambLight );
  79. // tile set
  80. box = new Box3();
  81. sphere = new Sphere();
  82. // parent for centering the tileset
  83. offsetParent = new Group();
  84. scene.add( offsetParent );
  85. tiles = new TilesRenderer( '../data/tileset.json' );
  86. offsetParent.add( tiles.group );
  87. // We define a custom scheduling callback to handle also active WebXR sessions
  88. const tilesSchedulingCB = func => {
  89. setTimeout( func, 50 );
  90. };
  91. // We set our scheduling callback for tiles downloading and parsing
  92. tiles.downloadQueue.schedulingCallback = tilesSchedulingCB;
  93. tiles.parseQueue.schedulingCallback = tilesSchedulingCB;
  94. // Raycasting init
  95. raycaster = new Raycaster();
  96. fwdVector = new Vector3( 0, 0, 1 );
  97. const rayIntersectMat = new MeshBasicMaterial( { color: 0xb2dfdb } );
  98. intersectRing = new Mesh( new TorusBufferGeometry( 1.5, 0.2, 16, 100 ), rayIntersectMat );
  99. intersectRing.visible = false;
  100. scene.add( intersectRing );
  101. // vr setup
  102. document.body.appendChild( VRButton.createButton( renderer ) );
  103. controller = renderer.xr.getController( 0 );
  104. controller.addEventListener( 'selectstart', () => {
  105. workspace.position.copy( intersectRing.position );
  106. } );
  107. controller.addEventListener( 'connected', function ( event ) {
  108. this.controllerActive = true;
  109. this.add( buildController( event.data ) );
  110. } );
  111. controller.addEventListener( 'disconnected', function () {
  112. this.controllerActive = false;
  113. this.remove( this.children[ 0 ] );
  114. } );
  115. workspace.add( controller );
  116. // controller models
  117. const controllerModelFactory = new XRControllerModelFactory();
  118. controllerGrip = renderer.xr.getControllerGrip( 0 );
  119. controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
  120. workspace.add( controllerGrip );
  121. onWindowResize();
  122. window.addEventListener( 'resize', onWindowResize, false );
  123. // GUI
  124. const gui = new dat.GUI();
  125. gui.width = 300;
  126. gui.add( params, 'displayGrid' );
  127. gui.add( params, 'displayBoxBounds' );
  128. gui.add( params, 'colorMode', {
  129. NONE,
  130. SCREEN_ERROR,
  131. GEOMETRIC_ERROR,
  132. DISTANCE,
  133. DEPTH,
  134. RELATIVE_DEPTH,
  135. IS_LEAF,
  136. RANDOM_COLOR,
  137. } );
  138. gui.open();
  139. }
  140. function buildController( data ) {
  141. let geometry, material;
  142. switch ( data.targetRayMode ) {
  143. case 'tracked-pointer':
  144. geometry = new BufferGeometry();
  145. geometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
  146. geometry.setAttribute( 'color', new Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
  147. material = new LineBasicMaterial( {
  148. vertexColors: true,
  149. blending: AdditiveBlending,
  150. depthWrite: false,
  151. transparent: true,
  152. } );
  153. return new Line( geometry, material );
  154. case 'gaze':
  155. geometry = new RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
  156. material = new MeshBasicMaterial( { opacity: 0.5, transparent: true } );
  157. return new Mesh( geometry, material );
  158. }
  159. }
  160. function onWindowResize() {
  161. camera.updateProjectionMatrix();
  162. renderer.setPixelRatio( window.devicePixelRatio );
  163. renderer.setSize( window.innerWidth, window.innerHeight );
  164. camera.aspect = window.innerWidth / window.innerHeight;
  165. camera.updateProjectionMatrix();
  166. }
  167. function animate() {
  168. renderer.setAnimationLoop( render );
  169. }
  170. function render() {
  171. requestAnimationFrame( animate );
  172. grid.visible = params.displayGrid;
  173. // update options
  174. tiles.displayBoxBounds = params.displayBoxBounds;
  175. tiles.colorMode = parseFloat( params.colorMode );
  176. // update tiles center
  177. if ( tiles.getBounds( box ) ) {
  178. box.getCenter( tiles.group.position );
  179. tiles.group.position.multiplyScalar( - 1 );
  180. } else if ( tiles.getBoundingSphere( sphere ) ) {
  181. tiles.group.position.copy( sphere.center );
  182. tiles.group.position.multiplyScalar( - 1 );
  183. }
  184. // remove all cameras so we can use the VR camera instead
  185. tiles.cameras.forEach( c => tiles.deleteCamera( camera ) );
  186. // get the XR camera with a combined frustum for culling
  187. if ( renderer.xr.isPresenting ) {
  188. const currCamera = renderer.xr.getCamera( camera );
  189. tiles.setCamera( currCamera );
  190. const leftCam = currCamera.cameras[ 0 ];
  191. if ( leftCam ) {
  192. tiles.setResolution( currCamera, leftCam.viewport.z, leftCam.viewport.w );
  193. }
  194. } else {
  195. tiles.setCamera( camera );
  196. tiles.setResolutionFromRenderer( camera, renderer );
  197. }
  198. tiles.update();
  199. if ( controller.controllerActive ) {
  200. const { ray } = raycaster;
  201. raycaster.firstHitOnly = true;
  202. // get the controller ray
  203. ray.origin
  204. .copy( controller.position )
  205. .applyMatrix4( workspace.matrixWorld );
  206. controller
  207. .getWorldDirection( ray.direction )
  208. .multiplyScalar( - 1 );
  209. const results = raycaster.intersectObject( tiles.group, true );
  210. if ( results.length ) {
  211. const hit = results[ 0 ];
  212. hit.face.normal.transformDirection( tiles.group.matrixWorld );
  213. intersectRing.position.copy( hit.point );
  214. intersectRing.quaternion.setFromUnitVectors(
  215. fwdVector,
  216. hit.face.normal,
  217. );
  218. intersectRing.visible = true;
  219. // scale ring based on distance
  220. const scale = workspace.position.distanceTo( intersectRing.position ) * camera.fov / 4000;
  221. intersectRing.scale.setScalar( scale );
  222. } else {
  223. intersectRing.visible = false;
  224. }
  225. } else {
  226. intersectRing.visible = false;
  227. }
  228. // render primary view
  229. renderer.render( scene, camera );
  230. }