webvr_vive_paint.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webvr - htc vive - paint</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <style>
  8. body {
  9. font-family: Monospace;
  10. background-color: #101010;
  11. color: #fff;
  12. margin: 0px;
  13. overflow: hidden;
  14. }
  15. a {
  16. color: #f00;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <script src="../build/three.js"></script>
  22. <script src="js/vr/ViveController.js"></script>
  23. <script src="js/vr/PaintViveController.js"></script>
  24. <script src="js/vr/WebVR.js"></script>
  25. <script src="js/loaders/OBJLoader.js"></script>
  26. <script>
  27. var container;
  28. var camera, scene, renderer;
  29. var controller1, controller2;
  30. var line;
  31. var shapes = {};
  32. var up = new THREE.Vector3( 0, 1, 0 );
  33. var vector = new THREE.Vector3();
  34. var vector1 = new THREE.Vector3();
  35. var vector2 = new THREE.Vector3();
  36. var vector3 = new THREE.Vector3();
  37. var vector4 = new THREE.Vector3();
  38. var point4 = new THREE.Vector3();
  39. var point5 = new THREE.Vector3();
  40. init();
  41. initGeometry();
  42. animate();
  43. function init() {
  44. container = document.createElement( 'div' );
  45. document.body.appendChild( container );
  46. var info = document.createElement( 'div' );
  47. info.style.position = 'absolute';
  48. info.style.top = '10px';
  49. info.style.width = '100%';
  50. info.style.textAlign = 'center';
  51. info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - htc vive - paint';
  52. container.appendChild( info );
  53. scene = new THREE.Scene();
  54. scene.background = new THREE.Color( 0x222222 );
  55. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
  56. scene.add( camera );
  57. var geometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
  58. var material = new THREE.MeshStandardMaterial( {
  59. color: 0x444444,
  60. roughness: 1.0,
  61. metalness: 0.0
  62. } );
  63. var table = new THREE.Mesh( geometry, material );
  64. table.position.y = 0.35;
  65. table.position.z = 0.85;
  66. table.castShadow = true;
  67. table.receiveShadow = true;
  68. scene.add( table );
  69. /*
  70. var table = new THREE.Mesh( geometry, material );
  71. table.position.y = 0.35;
  72. table.position.z = -0.85;
  73. table.castShadow = true;
  74. table.receiveShadow = true;
  75. scene.add( table );
  76. */
  77. var geometry = new THREE.PlaneGeometry( 4, 4 );
  78. var material = new THREE.MeshStandardMaterial( {
  79. color: 0x222222,
  80. roughness: 1.0,
  81. metalness: 0.0
  82. } );
  83. var floor = new THREE.Mesh( geometry, material );
  84. floor.rotation.x = - Math.PI / 2;
  85. floor.receiveShadow = true;
  86. scene.add( floor );
  87. scene.add( new THREE.GridHelper( 20, 40, 0x111111, 0x111111 ) );
  88. scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
  89. var light = new THREE.DirectionalLight( 0xffffff );
  90. light.position.set( 0, 6, 0 );
  91. light.castShadow = true;
  92. light.shadow.camera.top = 2;
  93. light.shadow.camera.bottom = -2;
  94. light.shadow.camera.right = 2;
  95. light.shadow.camera.left = -2;
  96. light.shadow.mapSize.set( 4096, 4096 );
  97. scene.add( light );
  98. // scene.add( new THREE.DirectionalLightHelper( light ) );
  99. // scene.add( new THREE.CameraHelper( light.shadow.camera ) );
  100. //
  101. renderer = new THREE.WebGLRenderer( { antialias: true } );
  102. renderer.setPixelRatio( window.devicePixelRatio );
  103. renderer.setSize( window.innerWidth, window.innerHeight );
  104. renderer.gammaInput = true;
  105. renderer.gammaOutput = true;
  106. renderer.shadowMap.enabled = true;
  107. renderer.vr.enabled = true;
  108. renderer.vr.standing = true;
  109. container.appendChild( renderer.domElement );
  110. document.body.appendChild( WEBVR.createButton( renderer ) );
  111. // controllers
  112. controller1 = new THREE.PaintViveController( 0 );
  113. controller1.standingMatrix = renderer.vr.getStandingMatrix();
  114. controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
  115. controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
  116. scene.add( controller1 );
  117. controller2 = new THREE.PaintViveController( 1 );
  118. controller2.standingMatrix = renderer.vr.getStandingMatrix();
  119. controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
  120. controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
  121. scene.add( controller2 );
  122. var loader = new THREE.OBJLoader();
  123. loader.setPath( 'models/obj/vive-controller/' );
  124. loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
  125. var loader = new THREE.TextureLoader();
  126. loader.setPath( 'models/obj/vive-controller/' );
  127. var controller = object.children[ 0 ];
  128. controller.material.map = loader.load( 'onepointfive_texture.png' );
  129. controller.material.specularMap = loader.load( 'onepointfive_spec.png' );
  130. controller.castShadow = true;
  131. controller.receiveShadow = true;
  132. // var pivot = new THREE.Group();
  133. // var pivot = new THREE.Mesh( new THREE.BoxGeometry( 0.01, 0.01, 0.01 ) );
  134. var pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 2 ) );
  135. pivot.name = 'pivot';
  136. pivot.position.y = -0.016;
  137. pivot.position.z = -0.043;
  138. pivot.rotation.x = Math.PI / 5.5;
  139. controller.add( pivot );
  140. controller1.add( controller.clone() );
  141. pivot.material = pivot.material.clone();
  142. controller2.add( controller.clone() );
  143. } );
  144. //
  145. window.addEventListener( 'resize', onWindowResize, false );
  146. }
  147. function initGeometry() {
  148. var geometry = new THREE.BufferGeometry();
  149. var positions = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
  150. positions.dynamic = true;
  151. geometry.addAttribute( 'position', positions );
  152. var normals = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
  153. normals.dynamic = true;
  154. geometry.addAttribute( 'normal', normals );
  155. var colors = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
  156. colors.dynamic = true;
  157. geometry.addAttribute( 'color', colors );
  158. geometry.drawRange.count = 0;
  159. //
  160. /*
  161. var path = "textures/cube/SwedishRoyalCastle/";
  162. var format = '.jpg';
  163. var urls = [
  164. path + 'px' + format, path + 'nx' + format,
  165. path + 'py' + format, path + 'ny' + format,
  166. path + 'pz' + format, path + 'nz' + format
  167. ];
  168. var reflectionCube = new THREE.CubeTextureLoader().load( urls );
  169. */
  170. var material = new THREE.MeshStandardMaterial( {
  171. roughness: 0.9,
  172. metalness: 0.0,
  173. // envMap: reflectionCube,
  174. vertexColors: THREE.VertexColors,
  175. side: THREE.DoubleSide
  176. } );
  177. line = new THREE.Mesh( geometry, material );
  178. line.frustumCulled = false;
  179. line.castShadow = true;
  180. line.receiveShadow = true;
  181. scene.add( line );
  182. // Shapes
  183. shapes[ 'tube' ] = getTubeShapes(1.0);
  184. }
  185. function getTubeShapes(size) {
  186. var PI2 = Math.PI * 2;
  187. var sides = 10;
  188. var array = [];
  189. var radius = 0.01 * size;
  190. for( var i = 0; i < sides; i ++ ){
  191. var angle = ( i / sides ) * PI2;
  192. array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
  193. }
  194. return array;
  195. }
  196. function stroke( controller, point1, point2, matrix1, matrix2 ) {
  197. var color = controller.getColor();
  198. var shapes = getTubeShapes( controller.getSize() );
  199. var geometry = line.geometry;
  200. var attributes = geometry.attributes;
  201. var count = geometry.drawRange.count;
  202. var positions = attributes.position.array;
  203. var normals = attributes.normal.array;
  204. var colors = attributes.color.array;
  205. for ( var j = 0, jl = shapes.length; j < jl; j ++ ) {
  206. var vertex1 = shapes[ j ];
  207. var vertex2 = shapes[ ( j + 1 ) % jl ];
  208. // positions
  209. vector1.copy( vertex1 );
  210. vector1.applyMatrix4( matrix2 );
  211. vector1.add( point2 );
  212. vector2.copy( vertex2 );
  213. vector2.applyMatrix4( matrix2 );
  214. vector2.add( point2 );
  215. vector3.copy( vertex2 );
  216. vector3.applyMatrix4( matrix1 );
  217. vector3.add( point1 );
  218. vector4.copy( vertex1 );
  219. vector4.applyMatrix4( matrix1 );
  220. vector4.add( point1 );
  221. vector1.toArray( positions, ( count + 0 ) * 3 );
  222. vector2.toArray( positions, ( count + 1 ) * 3 );
  223. vector4.toArray( positions, ( count + 2 ) * 3 );
  224. vector2.toArray( positions, ( count + 3 ) * 3 );
  225. vector3.toArray( positions, ( count + 4 ) * 3 );
  226. vector4.toArray( positions, ( count + 5 ) * 3 );
  227. // normals
  228. vector1.copy( vertex1 );
  229. vector1.applyMatrix4( matrix2 );
  230. vector1.normalize();
  231. vector2.copy( vertex2 );
  232. vector2.applyMatrix4( matrix2 );
  233. vector2.normalize();
  234. vector3.copy( vertex2 );
  235. vector3.applyMatrix4( matrix1 );
  236. vector3.normalize();
  237. vector4.copy( vertex1 );
  238. vector4.applyMatrix4( matrix1 );
  239. vector4.normalize();
  240. vector1.toArray( normals, ( count + 0 ) * 3 );
  241. vector2.toArray( normals, ( count + 1 ) * 3 );
  242. vector4.toArray( normals, ( count + 2 ) * 3 );
  243. vector2.toArray( normals, ( count + 3 ) * 3 );
  244. vector3.toArray( normals, ( count + 4 ) * 3 );
  245. vector4.toArray( normals, ( count + 5 ) * 3 );
  246. // colors
  247. color.toArray( colors, ( count + 0 ) * 3 );
  248. color.toArray( colors, ( count + 1 ) * 3 );
  249. color.toArray( colors, ( count + 2 ) * 3 );
  250. color.toArray( colors, ( count + 3 ) * 3 );
  251. color.toArray( colors, ( count + 4 ) * 3 );
  252. color.toArray( colors, ( count + 5 ) * 3 );
  253. count += 6;
  254. }
  255. geometry.drawRange.count = count;
  256. }
  257. function updateGeometry( start, end ) {
  258. if ( start === end ) return;
  259. var offset = start * 3;
  260. var count = ( end - start ) * 3;
  261. var geometry = line.geometry;
  262. var attributes = geometry.attributes;
  263. attributes.position.updateRange.offset = offset;
  264. attributes.position.updateRange.count = count;
  265. attributes.position.needsUpdate = true;
  266. attributes.normal.updateRange.offset = offset;
  267. attributes.normal.updateRange.count = count;
  268. attributes.normal.needsUpdate = true;
  269. attributes.color.updateRange.offset = offset;
  270. attributes.color.updateRange.count = count;
  271. attributes.color.needsUpdate = true;
  272. }
  273. function onWindowResize() {
  274. camera.aspect = window.innerWidth / window.innerHeight;
  275. camera.updateProjectionMatrix();
  276. renderer.setSize( window.innerWidth, window.innerHeight );
  277. }
  278. //
  279. function handleController( controller ) {
  280. controller.update();
  281. var pivot = controller.getObjectByName( 'pivot' );
  282. if ( pivot ) {
  283. pivot.material.color.copy( controller.getColor() );
  284. pivot.scale.setScalar(controller.getSize());
  285. var matrix = pivot.matrixWorld;
  286. var point1 = controller.userData.points[ 0 ];
  287. var point2 = controller.userData.points[ 1 ];
  288. var matrix1 = controller.userData.matrices[ 0 ];
  289. var matrix2 = controller.userData.matrices[ 1 ];
  290. point1.setFromMatrixPosition( matrix );
  291. matrix1.lookAt( point2, point1, up );
  292. if ( controller.getButtonState( 'trigger' ) ) {
  293. stroke( controller, point1, point2, matrix1, matrix2 );
  294. }
  295. point2.copy( point1 );
  296. matrix2.copy( matrix1 );
  297. }
  298. }
  299. function animate() {
  300. renderer.animate( render );
  301. }
  302. function render() {
  303. var count = line.geometry.drawRange.count;
  304. handleController( controller1 );
  305. handleController( controller2 );
  306. updateGeometry( count, line.geometry.drawRange.count );
  307. renderer.render( scene, camera );
  308. }
  309. </script>
  310. </body>
  311. </html>