threejs-example.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. var ExampleScene = function() {
  2. //The current selected material saved to the hash
  3. var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial";
  4. this.renderer = undefined;
  5. this.controls = undefined;
  6. this.div = document.getElementById( 'clean' );
  7. this.scene = new THREE.Scene();
  8. this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum)
  9. this.camera.position.z = 50;
  10. this.addRenderer();
  11. this.addControls();
  12. this.addLights();
  13. //this.addSpheresBasic();
  14. this.addSpheresWithMaterial( selectedMaterial );
  15. //this.addGeometry();
  16. this.addGrid();
  17. this.addEventListeners();
  18. this.loop();
  19. };
  20. ExampleScene.prototype = {
  21. addLights : function() {
  22. this.lights = [];
  23. this.lights[0] = new THREE.AmbientLight( 0xffffff );
  24. this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 );
  25. this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 );
  26. this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 );
  27. this.lights[1].position.set(0, 200, 0);
  28. this.lights[2].position.set(100, 200, 100);
  29. this.lights[3].position.set(-100, -200, -100);
  30. //this.scene.add( this.lights[0] );
  31. this.scene.add( this.lights[1] );
  32. this.scene.add( this.lights[2] );
  33. this.scene.add( this.lights[3] );
  34. },
  35. addGeometry : function() {
  36. //-------------------------------------------------------------------------------
  37. // Various types of geometry to play with, only un-comment 1 geometry at a time
  38. //var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI);
  39. //var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1); //(width, height, depth, widthSegments, heightSegments, depthSegments)
  40. var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false); //(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
  41. //var geometry = new THREE.CircleGeometry();
  42. /*
  43. // Extruded Geometry
  44. var extrudeSettings = {
  45. bevelEnabled: true,
  46. bevelSegments: 2,
  47. steps: 100,
  48. extrudePath : new THREE.SplineCurve3([
  49. new THREE.Vector3( 0, -8, 0),
  50. new THREE.Vector3( 3, -1.66, 0),
  51. new THREE.Vector3( -3, 1.66, 0),
  52. new THREE.Vector3( 0, 8, 0)
  53. ])
  54. };
  55. var extrudeBend = new THREE.Shape([ //Closed
  56. new THREE.Vector3( 0.05, 0.00, 0.00),
  57. new THREE.Vector3( 0.85, 0.00, 0.00),
  58. new THREE.Vector3( 1.00, 0.05, 0.00),
  59. new THREE.Vector3( 1.00, 0.85, 0.00),
  60. new THREE.Vector3( 0.85, 1.00, 0.00),
  61. new THREE.Vector3( 0.05, 1.00, 0.00),
  62. new THREE.Vector3( 0.00, 0.85, 0.00),
  63. new THREE.Vector3( 0.00, 0.05, 0.00)
  64. ]);
  65. var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings);
  66. */
  67. var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
  68. new THREE.MeshNormalMaterial( {} ),
  69. new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2, opacity: 0.1, transparent: true } ) ]
  70. );
  71. this.scene.add(mesh);
  72. },
  73. addRenderer : function() {
  74. this.renderer = new THREE.WebGLRenderer();
  75. this.renderer.setSize( window.innerWidth, window.innerHeight );
  76. this.div.appendChild( this.renderer.domElement );
  77. },
  78. addControls : function() {
  79. this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
  80. },
  81. addSpheresBasic : function() {
  82. var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments)
  83. this.spheres = [];
  84. this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) );
  85. this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) );
  86. this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) );
  87. this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
  88. this.spheres[0].position.set(10, 0, 0);
  89. this.spheres[1].position.set( 0, 10, 0);
  90. this.spheres[2].position.set( 0, 0, 10);
  91. this.spheres[3].position.set(10, 10, 0);
  92. this.scene.add(this.spheres[0]);
  93. this.scene.add(this.spheres[1]);
  94. this.scene.add(this.spheres[2]);
  95. this.scene.add(this.spheres[3]);
  96. },
  97. addSpheresWithMaterial : function(material) {
  98. var sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments)
  99. this.spheres = [];
  100. var colors = [
  101. 0x9f0040,
  102. 0x00409f,
  103. 0x809f80,
  104. 0x9faa00
  105. ];
  106. for(var i=0; i < 4; ++i) {
  107. //Non-shiny material
  108. if(material === "MeshLambertMaterial") {
  109. this.spheres.push(
  110. new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( {
  111. color: colors[i],
  112. emissive : new THREE.Color( 0x000510 ),
  113. wireframe : false,
  114. wireframeLinewidth : 3
  115. }))
  116. );
  117. } else if(material === "MeshPhongMaterial") {
  118. this.spheres.push(
  119. new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( {
  120. color: colors[i],
  121. specular : new THREE.Color( 0xffffff ),
  122. shininess : Math.pow(10, i),
  123. emissive : new THREE.Color( 0x000510 ),
  124. shading : THREE.NoShading,
  125. wireframe : false,
  126. wireframeLinewidth : 3
  127. }))
  128. );
  129. } else if(material === "MeshNormalMaterial") {
  130. this.spheres.push(
  131. new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( {
  132. }))
  133. );
  134. } else if(material === "MeshDepthMaterial") {
  135. this.spheres.push(
  136. new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( {
  137. shading: THREE.FlatShading,
  138. wireframe: true
  139. }))
  140. );
  141. this.camera.near = 20;
  142. this.camera.far = 100;
  143. } else if(material === "MeshFaceMaterial") {
  144. /* Can't get to work
  145. var materials = [],
  146. colorIterator;
  147. //Create 6 materials
  148. for (var j=0; j<6; j++) {
  149. var img = new Image();
  150. img.src = "textures/cube/clean/" + i + '.jpg';
  151. var tex = new THREE.Texture(img);
  152. img.tex = tex;
  153. img.onload = function() {
  154. this.tex.needsUpdate = true;
  155. };
  156. colorIterator = Math.floor(Math.random() * colors.length);
  157. materials[j] = new THREE.MeshBasicMaterial({
  158. color: 0xffffff,
  159. transparent: true,
  160. blending: THREE.AdditiveBlending,
  161. map: tex
  162. });
  163. }
  164. console.log(materials);
  165. this.spheres.push(
  166. new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials ))
  167. );
  168. */
  169. } else {
  170. if(material !== "MeshBasicMaterial") {
  171. console.log(material + " material not implemented by this script. Using MeshBasicMaterial");
  172. }
  173. this.spheres.push(
  174. new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) )
  175. );
  176. }
  177. }
  178. //Set the position
  179. this.spheres[0].position.set( 0, 0, 0);
  180. this.spheres[1].position.set( 10, 0, 0);
  181. this.spheres[2].position.set(-10, 0, 0);
  182. this.spheres[3].position.set( 0, 10, 0);
  183. this.scene.add(this.spheres[0]);
  184. this.scene.add(this.spheres[1]);
  185. this.scene.add(this.spheres[2]);
  186. this.scene.add(this.spheres[3]);
  187. },
  188. addGrid : function() {
  189. var lineMaterial = new THREE.LineBasicMaterial( { color: 0x303030 } ),
  190. geometry = new THREE.Geometry(),
  191. floor = -75, step = 25;
  192. for ( var i = 0; i <= 40; i ++ ) {
  193. geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
  194. geometry.vertices.push( new THREE.Vector3( 500, floor, i * step - 500 ) );
  195. geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
  196. geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, 500 ) );
  197. }
  198. this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces );
  199. this.scene.add( this.grid );
  200. },
  201. addEventListeners : function() {
  202. $(window).on('resize', this.resizeHandler.bind(this));
  203. },
  204. resizeHandler : function() {
  205. this.camera.aspect = window.innerWidth / window.innerHeight;
  206. this.camera.updateProjectionMatrix();
  207. this.renderer.setSize( window.innerWidth, window.innerHeight );
  208. },
  209. loop : function() {
  210. requestAnimationFrame( this.loop.bind(this) );
  211. this.render();
  212. },
  213. render : function() {
  214. this.controls.update();
  215. this.renderer.render( this.scene, this.camera );
  216. }
  217. };
  218. var MaterialSelector = function() {
  219. this.setSelectedChoiceFromHash();
  220. this.addEventListeners();
  221. }
  222. MaterialSelector.prototype = {
  223. addEventListeners : function() {
  224. $('#material').change(this.loadNewMaterial.bind(this));
  225. },
  226. loadNewMaterial : function() {
  227. window.location.hash = $('#material').val();
  228. window.location.reload()
  229. },
  230. setSelectedChoiceFromHash : function() {
  231. $('#material > option').each(function() {
  232. var $this = $(this),
  233. hash = window.location.hash.substring(1);
  234. if( $this.text() == hash ) {
  235. $this.attr('selected', 'selected');
  236. }
  237. })
  238. },
  239. }
  240. var exampleScene, materialSelector;
  241. $(function() {
  242. materialSelector = new MaterialSelector();
  243. exampleScene = new ExampleScene();
  244. });