webvr_vive_sculpt.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webvr - htc vive - sculpt</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="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - htc vive - sculpt
  12. </div>
  13. <script src="../build/three.js"></script>
  14. <script src="js/vr/ViveController.js"></script>
  15. <script src="js/vr/WebVR.js"></script>
  16. <script src="js/loaders/OBJLoader.js"></script>
  17. <script src="js/MarchingCubes.js"></script>
  18. <script>
  19. var container;
  20. var camera, scene, renderer;
  21. var controller1, controller2;
  22. var blob;
  23. var points = [];
  24. init();
  25. initBlob();
  26. animate();
  27. function init() {
  28. container = document.createElement( 'div' );
  29. document.body.appendChild( container );
  30. scene = new THREE.Scene();
  31. scene.background = new THREE.Color( 0x222222 );
  32. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
  33. var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
  34. var material = new THREE.MeshStandardMaterial( {
  35. color: 0x444444,
  36. roughness: 1.0,
  37. metalness: 0.0
  38. } );
  39. var table = new THREE.Mesh( geometry, material );
  40. table.position.y = 0.35;
  41. table.position.z = 0.85;
  42. table.castShadow = true;
  43. table.receiveShadow = true;
  44. scene.add( table );
  45. var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
  46. var material = new THREE.MeshStandardMaterial( {
  47. color: 0x222222,
  48. roughness: 1.0,
  49. metalness: 0.0
  50. } );
  51. var floor = new THREE.Mesh( geometry, material );
  52. floor.rotation.x = - Math.PI / 2;
  53. floor.receiveShadow = true;
  54. scene.add( floor );
  55. scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
  56. scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
  57. var light = new THREE.DirectionalLight( 0xffffff );
  58. light.position.set( 0, 6, 0 );
  59. light.castShadow = true;
  60. light.shadow.camera.top = 2;
  61. light.shadow.camera.bottom = - 2;
  62. light.shadow.camera.right = 2;
  63. light.shadow.camera.left = - 2;
  64. light.shadow.mapSize.set( 4096, 4096 );
  65. scene.add( light );
  66. // scene.add( new THREE.DirectionalLightHelper( light ) );
  67. // scene.add( new THREE.CameraHelper( light.shadow.camera ) );
  68. //
  69. renderer = new THREE.WebGLRenderer( { antialias: true } );
  70. renderer.setPixelRatio( window.devicePixelRatio );
  71. renderer.setSize( window.innerWidth, window.innerHeight );
  72. renderer.gammaInput = true;
  73. renderer.gammaOutput = true;
  74. renderer.shadowMap.enabled = true;
  75. renderer.vr.enabled = true;
  76. container.appendChild( renderer.domElement );
  77. document.body.appendChild( WEBVR.createButton( renderer ) );
  78. // controllers
  79. controller1 = new THREE.ViveController( 0 );
  80. controller1.standingMatrix = renderer.vr.getStandingMatrix();
  81. scene.add( controller1 );
  82. controller2 = new THREE.ViveController( 1 );
  83. controller2.standingMatrix = renderer.vr.getStandingMatrix();
  84. scene.add( controller2 );
  85. var loader = new THREE.OBJLoader();
  86. loader.setPath( 'models/obj/vive-controller/' );
  87. loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
  88. var loader = new THREE.TextureLoader();
  89. loader.setPath( 'models/obj/vive-controller/' );
  90. var controller = object.children[ 0 ];
  91. controller.material.map = loader.load( 'onepointfive_texture.png' );
  92. controller.material.specularMap = loader.load( 'onepointfive_spec.png' );
  93. controller.castShadow = true;
  94. controller.receiveShadow = true;
  95. // var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
  96. var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
  97. pivot.name = 'pivot';
  98. pivot.position.y = - 0.016;
  99. pivot.position.z = - 0.043;
  100. pivot.rotation.x = Math.PI / 5.5;
  101. controller.add( pivot );
  102. var range = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
  103. pivot.add( range );
  104. controller1.add( controller.clone() );
  105. controller2.add( controller.clone() );
  106. } );
  107. //
  108. window.addEventListener( 'resize', onWindowResize, false );
  109. }
  110. function initBlob() {
  111. /*
  112. var path = "textures/cube/SwedishRoyalCastle/";
  113. var format = '.jpg';
  114. var urls = [
  115. path + 'px' + format, path + 'nx' + format,
  116. path + 'py' + format, path + 'ny' + format,
  117. path + 'pz' + format, path + 'nz' + format
  118. ];
  119. var reflectionCube = new THREE.CubeTextureLoader().load( urls );
  120. */
  121. var material = new THREE.MeshStandardMaterial( {
  122. color: 0xffffff,
  123. // envMap: reflectionCube,
  124. roughness: 0.9,
  125. metalness: 0.0
  126. } );
  127. blob = new THREE.MarchingCubes( 64, material, true );
  128. blob.position.y = 1;
  129. scene.add( blob );
  130. initPoints();
  131. }
  132. function initPoints() {
  133. points = [
  134. { position: new THREE.Vector3(), strength: - 0.08, subtract: 10 },
  135. { position: new THREE.Vector3(), strength: 0.04, subtract: 10 }
  136. ];
  137. }
  138. function onWindowResize() {
  139. camera.aspect = window.innerWidth / window.innerHeight;
  140. camera.updateProjectionMatrix();
  141. renderer.setSize( window.innerWidth, window.innerHeight );
  142. }
  143. //
  144. function animate() {
  145. renderer.setAnimationLoop( render );
  146. }
  147. function transformPoint( vector ) {
  148. vector.x = ( vector.x + 1.0 ) / 2.0;
  149. vector.y = ( vector.y / 2.0 );
  150. vector.z = ( vector.z + 1.0 ) / 2.0;
  151. }
  152. function handleController( controller, id ) {
  153. controller.update();
  154. var pivot = controller.getObjectByName( 'pivot' );
  155. if ( pivot ) {
  156. var matrix = pivot.matrixWorld;
  157. points[ id ].position.setFromMatrixPosition( matrix );
  158. transformPoint( points[ id ].position );
  159. if ( controller.getButtonState( 'thumbpad' ) ) {
  160. blob.material.color.setHex( Math.random() * 0xffffff );
  161. }
  162. if ( controller.getButtonState( 'trigger' ) ) {
  163. var strength = points[ id ].strength / 2;
  164. var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
  165. transformPoint( vector );
  166. points.push( { position: vector, strength: strength, subtract: 10 } );
  167. }
  168. if ( id === 0 && controller.getButtonState( 'grips' ) ) {
  169. if ( points.length > 2 ) {
  170. points.shift();
  171. points.shift();
  172. updateBlob();
  173. var geometry = blob.generateBufferGeometry();
  174. var mesh = new THREE.Mesh( geometry, blob.material.clone() );
  175. mesh.position.y = 1;
  176. mesh.castShadow = true;
  177. mesh.receiveShadow = true;
  178. scene.add( mesh );
  179. initPoints();
  180. }
  181. }
  182. if ( id === 1 && controller.getButtonState( 'grips' ) ) {
  183. points[ id ].strength = ( Math.sin( performance.now() / 1000 ) + 1.5 ) / 20.0;
  184. }
  185. }
  186. }
  187. function updateBlob() {
  188. blob.reset();
  189. for ( var i = 0; i < points.length; i ++ ) {
  190. var point = points[ i ];
  191. var position = point.position;
  192. blob.addBall( position.x, position.y, position.z, point.strength, point.subtract );
  193. }
  194. }
  195. function render() {
  196. handleController( controller1, 0 );
  197. handleController( controller2, 1 );
  198. updateBlob();
  199. renderer.render( scene, camera );
  200. }
  201. </script>
  202. </body>
  203. </html>