misc_uqbiquity_test.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - geometry - canvas polyfield</title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. body {
  8. background-color: #ffffff;
  9. margin: 0px;
  10. overflow: hidden;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <!--
  16. <script type="text/javascript" src="../build/Three.js"></script>
  17. -->
  18. <script type="text/javascript" src="../src/Three.js"></script>
  19. <script type="text/javascript" src="../src/core/Color.js"></script>
  20. <script type="text/javascript" src="../src/core/Vector2.js"></script>
  21. <script type="text/javascript" src="../src/core/Vector3.js"></script>
  22. <script type="text/javascript" src="../src/core/Vector4.js"></script>
  23. <script type="text/javascript" src="../src/core/Ray.js"></script>
  24. <script type="text/javascript" src="../src/core/Rectangle.js"></script>
  25. <script type="text/javascript" src="../src/core/Matrix3.js"></script>
  26. <script type="text/javascript" src="../src/core/Matrix4.js"></script>
  27. <script type="text/javascript" src="../src/core/Quaternion.js"></script>
  28. <script type="text/javascript" src="../src/core/Vertex.js"></script>
  29. <script type="text/javascript" src="../src/core/Face3.js"></script>
  30. <script type="text/javascript" src="../src/core/Face4.js"></script>
  31. <script type="text/javascript" src="../src/core/UV.js"></script>
  32. <script type="text/javascript" src="../src/core/Geometry.js"></script>
  33. <script type="text/javascript" src="../src/objects/Object3D.js"></script>
  34. <script type="text/javascript" src="../src/objects/Particle.js"></script>
  35. <script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
  36. <script type="text/javascript" src="../src/objects/Line.js"></script>
  37. <script type="text/javascript" src="../src/objects/Mesh.js"></script>
  38. <script type="text/javascript" src="../src/objects/Bone.js"></script>
  39. <script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
  40. <script type="text/javascript" src="../src/objects/Ribbon.js"></script>
  41. <script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
  42. <script type="text/javascript" src="../src/animation/Animation.js"></script>
  43. <script type="text/javascript" src="../src/cameras/Camera.js"></script>
  44. <script type="text/javascript" src="../src/lights/Light.js"></script>
  45. <script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
  46. <script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
  47. <script type="text/javascript" src="../src/lights/PointLight.js"></script>
  48. <script type="text/javascript" src="../src/materials/Material.js"></script>
  49. <script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
  50. <script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
  51. <script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
  52. <script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
  53. <script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
  54. <script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
  55. <script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
  56. <script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
  57. <script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
  58. <script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
  59. <script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
  60. <script type="text/javascript" src="../src/materials/Texture.js"></script>
  61. <script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
  62. <script type="text/javascript" src="../src/materials/Uniforms.js"></script>
  63. <script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
  64. <script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
  65. <script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
  66. <script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
  67. <script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
  68. <script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
  69. <script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
  70. <script type="text/javascript" src="../src/scenes/Scene.js"></script>
  71. <script type="text/javascript" src="../src/scenes/Fog.js"></script>
  72. <script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
  73. <script type="text/javascript" src="../src/renderers/Projector.js"></script>
  74. <script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
  75. <script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
  76. <script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
  77. <script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
  78. <script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
  79. <script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
  80. <script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
  81. <script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
  82. <script type="text/javascript" src="obj/Qrcode.js"></script>
  83. <script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
  84. <script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
  85. <script type="text/javascript" src="../src/extras/primitives/Cylinder.js"></script>
  86. <script type="text/javascript" src="../src/extras/objects/MarchingCubes.js"></script>
  87. <script type="text/javascript" src="js/Stats.js"></script>
  88. <script type="text/javascript">
  89. var SCREEN_WIDTH = window.innerWidth / 3;
  90. var SCREEN_HEIGHT = window.innerHeight;
  91. var AMOUNT = 100;
  92. var container, stats;
  93. var camera, scene;
  94. var canvasRenderer, svgRenderer, webglRenderer;
  95. var mesh, qrcode;
  96. var mouseX = 0, mouseY = 0;
  97. var windowHalfX = window.innerWidth / 2;
  98. var windowHalfY = window.innerHeight / 2;
  99. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  100. init();
  101. // loop();
  102. setInterval( loop, 1000 / 60 );
  103. function init() {
  104. container = document.createElement('div');
  105. document.body.appendChild(container);
  106. camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
  107. // camera.position.x = - 5000;
  108. // camera.position.y = 50000;
  109. camera.position.z = 500
  110. scene = new THREE.Scene();
  111. // QRCODE
  112. qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
  113. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  114. scene.addObject( mesh );
  115. // CUBES
  116. var cube = new Cube( 100, 100, 100 );
  117. mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5 } ) );
  118. mesh.position.x = 500;
  119. mesh.rotation.x = Math.random();
  120. mesh.rotation.y = Math.random();
  121. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  122. scene.addObject( mesh );
  123. mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
  124. mesh.position.x = 500;
  125. mesh.position.y = 500;
  126. mesh.rotation.x = Math.random();
  127. mesh.rotation.y = Math.random();
  128. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  129. scene.addObject( mesh );
  130. // PLANE
  131. mesh = new THREE.Mesh( new Plane( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
  132. mesh.position.y = -500;
  133. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  134. mesh.doubleSided = true;
  135. scene.addObject( mesh );
  136. // CYLINDER
  137. mesh = new THREE.Mesh( new Cylinder( 10, 20, 100, 200, - 50, - 20 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
  138. mesh.position.x = -500;
  139. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  140. scene.addObject( mesh );
  141. // POLYFIELD
  142. var geometry = new THREE.Geometry();
  143. for (var i = 0; i < 100; i ++) {
  144. var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
  145. var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
  146. var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
  147. var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
  148. v0.position.addSelf( v );
  149. v1.position.addSelf( v );
  150. v2.position.addSelf( v );
  151. var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
  152. geometry.faces.push( face );
  153. }
  154. geometry.computeFaceNormals();
  155. geometry.computeCentroids();
  156. geometry.sortFacesByMaterial();
  157. mesh = new THREE.Mesh( geometry, [ new THREE.MeshFaceMaterial(), new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, wireframe: true, wireframe_linewidth: 10 } ) ] );
  158. mesh.doubleSided = true;
  159. mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
  160. scene.addObject( mesh );
  161. // PARTICLES
  162. for ( var i = 0; i < 100; i ++ ) {
  163. particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0xffffff } ) );
  164. particle.position.x = Math.random() * 1000 - 500;
  165. particle.position.y = Math.random() * 1000 - 500;
  166. particle.position.z = Math.random() * 1000 - 500;
  167. particle.scale.x = particle.scale.y = 10;
  168. scene.addObject( particle );
  169. }
  170. // LIGHTS
  171. var ambient = new THREE.AmbientLight( 0x80ffff );
  172. scene.addLight( ambient );
  173. var directional = new THREE.DirectionalLight( 0xffff00 );
  174. scene.addLight( directional );
  175. canvasRenderer = new THREE.CanvasRenderer();
  176. canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  177. container.appendChild( canvasRenderer.domElement );
  178. svgRenderer = new THREE.SVGRenderer();
  179. svgRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  180. svgRenderer.setQuality( 'low' );
  181. container.appendChild( svgRenderer.domElement );
  182. webglRenderer = new THREE.WebGLRenderer();
  183. webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
  184. // webglRenderer.setFaceCulling( 0 );
  185. container.appendChild( webglRenderer.domElement );
  186. stats = new Stats();
  187. stats.domElement.style.position = 'absolute';
  188. stats.domElement.style.top = '0px';
  189. container.appendChild( stats.domElement );
  190. }
  191. function onDocumentMouseMove(event) {
  192. mouseX = ( event.clientX - windowHalfX );
  193. mouseY = ( event.clientY - windowHalfY );
  194. }
  195. function loop() {
  196. camera.position.x += ( mouseX - camera.position.x ) * .05;
  197. camera.position.y += ( - mouseY - camera.position.y ) * .05;
  198. camera.updateMatrix();
  199. mesh.rotation.y += 0.01;
  200. mesh.updateMatrix();
  201. /*
  202. qrcode.rotation.x += 0.01;
  203. qrcode.rotation.z += 0.02;
  204. */
  205. canvasRenderer.render( scene, camera );
  206. svgRenderer.render( scene, camera );
  207. webglRenderer.render( scene, camera );
  208. stats.update();
  209. }
  210. </script>
  211. </body>
  212. </html>