webxr_vr_paint.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js vr - paint</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - paint
  12. </div>
  13. <!-- Import maps polyfill -->
  14. <!-- Remove this when import maps will be widely supported -->
  15. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  16. <script type="importmap">
  17. {
  18. "imports": {
  19. "three": "../build/three.module.js"
  20. }
  21. }
  22. </script>
  23. <script type="module">
  24. import * as THREE from 'three';
  25. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  26. import { TubePainter } from './jsm/misc/TubePainter.js';
  27. import { VRButton } from './jsm/webxr/VRButton.js';
  28. let camera, scene, renderer;
  29. let controller1, controller2;
  30. const cursor = new THREE.Vector3();
  31. let controls;
  32. init();
  33. animate();
  34. function init() {
  35. const container = document.createElement( 'div' );
  36. document.body.appendChild( container );
  37. scene = new THREE.Scene();
  38. scene.background = new THREE.Color( 0x222222 );
  39. camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 50 );
  40. camera.position.set( 0, 1.6, 3 );
  41. controls = new OrbitControls( camera, container );
  42. controls.target.set( 0, 1.6, 0 );
  43. controls.update();
  44. const tableGeometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
  45. const tableMaterial = new THREE.MeshStandardMaterial( {
  46. color: 0x444444,
  47. roughness: 1.0,
  48. metalness: 0.0
  49. } );
  50. const table = new THREE.Mesh( tableGeometry, tableMaterial );
  51. table.position.y = 0.35;
  52. table.position.z = 0.85;
  53. scene.add( table );
  54. const floorGometry = new THREE.PlaneGeometry( 4, 4 );
  55. const floorMaterial = new THREE.MeshStandardMaterial( {
  56. color: 0x222222,
  57. roughness: 1.0,
  58. metalness: 0.0
  59. } );
  60. const floor = new THREE.Mesh( floorGometry, floorMaterial );
  61. floor.rotation.x = - Math.PI / 2;
  62. scene.add( floor );
  63. const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
  64. // grid.material.depthTest = false; // avoid z-fighting
  65. scene.add( grid );
  66. scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
  67. const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
  68. light.position.set( 0, 4, 0 );
  69. scene.add( light );
  70. //
  71. const painter1 = new TubePainter();
  72. scene.add( painter1.mesh );
  73. const painter2 = new TubePainter();
  74. scene.add( painter2.mesh );
  75. //
  76. renderer = new THREE.WebGLRenderer( { antialias: true } );
  77. renderer.setPixelRatio( window.devicePixelRatio );
  78. renderer.setSize( window.innerWidth, window.innerHeight );
  79. renderer.outputEncoding = THREE.sRGBEncoding;
  80. renderer.xr.enabled = true;
  81. container.appendChild( renderer.domElement );
  82. document.body.appendChild( VRButton.createButton( renderer ) );
  83. // controllers
  84. function onSelectStart() {
  85. this.userData.isSelecting = true;
  86. }
  87. function onSelectEnd() {
  88. this.userData.isSelecting = false;
  89. }
  90. function onSqueezeStart() {
  91. this.userData.isSqueezing = true;
  92. this.userData.positionAtSqueezeStart = this.position.y;
  93. this.userData.scaleAtSqueezeStart = this.scale.x;
  94. }
  95. function onSqueezeEnd() {
  96. this.userData.isSqueezing = false;
  97. }
  98. controller1 = renderer.xr.getController( 0 );
  99. controller1.addEventListener( 'selectstart', onSelectStart );
  100. controller1.addEventListener( 'selectend', onSelectEnd );
  101. controller1.addEventListener( 'squeezestart', onSqueezeStart );
  102. controller1.addEventListener( 'squeezeend', onSqueezeEnd );
  103. controller1.userData.painter = painter1;
  104. scene.add( controller1 );
  105. controller2 = renderer.xr.getController( 1 );
  106. controller2.addEventListener( 'selectstart', onSelectStart );
  107. controller2.addEventListener( 'selectend', onSelectEnd );
  108. controller2.addEventListener( 'squeezestart', onSqueezeStart );
  109. controller2.addEventListener( 'squeezeend', onSqueezeEnd );
  110. controller2.userData.painter = painter2;
  111. scene.add( controller2 );
  112. //
  113. const geometry = new THREE.CylinderGeometry( 0.01, 0.02, 0.08, 5 );
  114. geometry.rotateX( - Math.PI / 2 );
  115. const material = new THREE.MeshStandardMaterial( { flatShading: true } );
  116. const mesh = new THREE.Mesh( geometry, material );
  117. const pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 3 ) );
  118. pivot.name = 'pivot';
  119. pivot.position.z = - 0.05;
  120. mesh.add( pivot );
  121. controller1.add( mesh.clone() );
  122. controller2.add( mesh.clone() );
  123. //
  124. window.addEventListener( 'resize', onWindowResize );
  125. }
  126. function onWindowResize() {
  127. camera.aspect = window.innerWidth / window.innerHeight;
  128. camera.updateProjectionMatrix();
  129. renderer.setSize( window.innerWidth, window.innerHeight );
  130. }
  131. //
  132. function handleController( controller ) {
  133. const userData = controller.userData;
  134. const painter = userData.painter;
  135. const pivot = controller.getObjectByName( 'pivot' );
  136. if ( userData.isSqueezing === true ) {
  137. const delta = ( controller.position.y - userData.positionAtSqueezeStart ) * 5;
  138. const scale = Math.max( 0.1, userData.scaleAtSqueezeStart + delta );
  139. pivot.scale.setScalar( scale );
  140. painter.setSize( scale );
  141. }
  142. cursor.setFromMatrixPosition( pivot.matrixWorld );
  143. if ( userData.isSelecting === true ) {
  144. painter.lineTo( cursor );
  145. painter.update();
  146. } else {
  147. painter.moveTo( cursor );
  148. }
  149. }
  150. function animate() {
  151. renderer.setAnimationLoop( render );
  152. }
  153. function render() {
  154. handleController( controller1 );
  155. handleController( controller2 );
  156. renderer.render( scene, camera );
  157. }
  158. </script>
  159. </body>
  160. </html>