webgl_interactive_voxelpainter.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - interactive - voxel painter</title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. body {
  8. font-family: Monospace;
  9. background-color: #f0f0f0;
  10. margin: 0px;
  11. overflow: hidden;
  12. }
  13. #oldie { background-color: #ddd !important }
  14. </style>
  15. </head>
  16. <body>
  17. <script type="text/javascript" src="../build/Three.js"></script>
  18. <script type="text/javascript" src="js/Detector.js"></script>
  19. <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
  20. <script type="text/javascript" src="js/Stats.js"></script>
  21. <script type="text/javascript">
  22. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  23. var container, stats;
  24. var camera, scene, renderer;
  25. var projector, plane, cube;
  26. var mouse2D, mouse3D, ray,
  27. rollOveredFace, isShiftDown = false,
  28. theta = 45, isCtrlDown = false;
  29. var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
  30. var cubeGeo, cubeMaterial;
  31. var i, intersector;
  32. init();
  33. animate();
  34. function init() {
  35. container = document.createElement( 'div' );
  36. document.body.appendChild( container );
  37. var info = document.createElement( 'div' );
  38. info.style.position = 'absolute';
  39. info.style.top = '10px';
  40. info.style.width = '100%';
  41. info.style.textAlign = 'center';
  42. info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br /><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
  43. container.appendChild( info );
  44. camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  45. camera.position.y = 800;
  46. camera.target.position.y = 200;
  47. scene = new THREE.Scene();
  48. // roll-over helpers
  49. rollOverGeo = new Cube( 50, 50, 50 );
  50. rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
  51. rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
  52. scene.addObject( rollOverMesh );
  53. // cubes
  54. cubeGeo = new Cube( 50, 50, 50 );
  55. cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
  56. cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
  57. // picking
  58. projector = new THREE.Projector();
  59. // grid
  60. plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x555555, wireframe: true } ) );
  61. plane.rotation.x = - 90 * Math.PI / 180;
  62. scene.addObject( plane );
  63. mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
  64. ray = new THREE.Ray( camera.position, null );
  65. // Lights
  66. var ambientLight = new THREE.AmbientLight( 0x606060 );
  67. scene.addLight( ambientLight );
  68. var directionalLight = new THREE.DirectionalLight( 0xffffff );
  69. directionalLight.position.x = Math.random() - 0.5;
  70. directionalLight.position.y = Math.random() - 0.5;
  71. directionalLight.position.z = Math.random() - 0.5;
  72. directionalLight.position.normalize();
  73. scene.addLight( directionalLight );
  74. var directionalLight = new THREE.DirectionalLight( 0x808080 );
  75. directionalLight.position.x = Math.random() - 0.5;
  76. directionalLight.position.y = Math.random() - 0.5;
  77. directionalLight.position.z = Math.random() - 0.5;
  78. directionalLight.position.normalize();
  79. scene.addLight( directionalLight );
  80. renderer = new THREE.WebGLRenderer();
  81. renderer.setSize( window.innerWidth, window.innerHeight );
  82. container.appendChild(renderer.domElement);
  83. stats = new Stats();
  84. stats.domElement.style.position = 'absolute';
  85. stats.domElement.style.top = '0px';
  86. container.appendChild( stats.domElement );
  87. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  88. document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  89. document.addEventListener( 'keydown', onDocumentKeyDown, false );
  90. document.addEventListener( 'keyup', onDocumentKeyUp, false );
  91. }
  92. function getRealIntersector( intersects ) {
  93. for( i = 0; i < intersects.length; i++ ) {
  94. intersector = intersects[ i ];
  95. if ( intersector.object != rollOverMesh ) {
  96. return intersector;
  97. }
  98. }
  99. return null;
  100. }
  101. function setVoxelPosition( intersector ) {
  102. tmpVec.copy( intersector.face.normal );
  103. voxelPosition.add( intersector.point, intersector.object.matrixRotation.multiplyVector3( tmpVec ) );
  104. voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
  105. voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
  106. voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
  107. }
  108. function onDocumentMouseMove( event ) {
  109. event.preventDefault();
  110. mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  111. mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  112. }
  113. function onDocumentMouseDown( event ) {
  114. event.preventDefault();
  115. var intersects = ray.intersectScene( scene );
  116. if ( intersects.length > 0 ) {
  117. intersector = getRealIntersector( intersects );
  118. // delete cube
  119. if ( isCtrlDown ) {
  120. if ( intersector.object != plane ) {
  121. scene.removeObject( intersector.object );
  122. renderer.removeObject( scene, intersector.object );
  123. }
  124. // create cube
  125. } else {
  126. intersector = getRealIntersector( intersects );
  127. setVoxelPosition( intersector );
  128. var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
  129. voxel.position.copy( voxelPosition );
  130. scene.addObject( voxel );
  131. }
  132. }
  133. }
  134. function onDocumentKeyDown( event ) {
  135. switch( event.keyCode ) {
  136. case 16: isShiftDown = true; break;
  137. case 17: isCtrlDown = true; break;
  138. }
  139. }
  140. function onDocumentKeyUp( event ) {
  141. switch( event.keyCode ) {
  142. case 16: isShiftDown = false; break;
  143. case 17: isCtrlDown = false; break;
  144. }
  145. }
  146. function save() {
  147. window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
  148. }
  149. //
  150. function animate() {
  151. requestAnimationFrame( animate );
  152. render();
  153. stats.update();
  154. }
  155. function render() {
  156. if ( isShiftDown ) {
  157. theta += mouse2D.x * 3;
  158. }
  159. mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
  160. ray.direction = mouse3D.subSelf( camera.position ).normalize();
  161. var intersects = ray.intersectScene( scene );
  162. if ( intersects.length > 0 ) {
  163. intersector = getRealIntersector( intersects );
  164. if ( intersector ) {
  165. setVoxelPosition( intersector );
  166. rollOverMesh.position = voxelPosition;
  167. }
  168. }
  169. camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
  170. camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
  171. renderer.render( scene, camera );
  172. }
  173. </script>
  174. </body>
  175. </html>