Advertisement
Guest User

Untitled

a guest
Mar 30th, 2015
205
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.35 KB | None | 0 0
  1. var container;
  2. var camera, scene, renderer;
  3. var windowHalfX = window.innerWidth / 2;
  4. var windowHalfY = window.innerHeight / 2;
  5. var mouse, raycaster, controls, hemiLight;
  6. var active = false;
  7.  
  8. function init(containerID) {
  9. // Will setup all needed variables
  10. container = document.getElementById(containerID);
  11. camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 1, 2000);
  12. camera.position.z = 400;
  13.  
  14. // Scene
  15. scene = new THREE.Scene();
  16. hemiLight = new THREE.HemisphereLight(0xCC9966, 0xCC9966, 1);
  17. hemiLight.position.set(0, 500, 0);
  18. scene.add(hemiLight);
  19.  
  20. // Camera behaviour
  21. controls = new THREE.TrackballControls(camera);
  22. controls.rotateSpeed = 5.0;
  23. controls.zoomSpeed = 5;
  24. controls.panSpeed = 2;
  25. controls.noZoom = false;
  26. controls.noPan = false;
  27. controls.staticMoving = true;
  28. controls.dynamicDampingFactor = 0.3;
  29.  
  30. // Model
  31. var onProgress = function ( xhr ) {
  32. // Only necessary if the obj-file-size is very large
  33. };
  34. var onError = function ( xhr ) {
  35. // Something went wrong during loading obj-file
  36. console.log("Error, please report to the devs");
  37. };
  38.  
  39. THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
  40. var loader = new THREE.OBJMTLLoader();
  41.  
  42. // Load the 3D Files
  43. loader.load( 'objects/head.obj', 'images/head.mtl', function ( object ) {
  44. prepareObj( object, "head" );
  45. }, onProgress, onError );
  46. loader.load( 'objects/torso.obj', 'images/torso.mtl', function ( object ) {
  47. prepareObj( object, "torso" );
  48. }, onProgress, onError );
  49. loader.load( 'objects/arm_left.obj', 'images/arm_left.mtl', function ( object ) {
  50. prepareObj( object, "arm_left" );
  51. }, onProgress, onError );
  52. loader.load( 'objects/arm_right.obj', 'images/arm_right.mtl', function ( object ) {
  53. prepareObj( object, "arm_right" );
  54. }, onProgress, onError );
  55. loader.load( 'objects/leg_right.obj', 'images/leg_right.mtl', function ( object ) {
  56. prepareObj( object, "leg_right" );
  57. }, onProgress, onError );
  58. loader.load( 'objects/leg_left.obj', 'images/leg_left.mtl', function ( object ) {
  59. prepareObj( object, "leg_left" );
  60. }, onProgress, onError );
  61.  
  62. renderer = new THREE.WebGLRenderer();
  63. renderer.setPixelRatio(window.devicePixelRatio);
  64. renderer.setSize(500, 500);
  65. renderer.setClearColor(0xffffff, 1);
  66. container.appendChild(renderer.domElement);
  67.  
  68. document.addEventListener("mouseover", function(e) {
  69. checkBodyActive(e);
  70. }, false);
  71. document.addEventListener("click", onClick, false);
  72. window.addEventListener("resize", onWindowResize, false);
  73.  
  74. raycaster = new THREE.Raycaster();
  75. mouse = new THREE.Vector2();
  76.  
  77. camera.aspect = 1;
  78. camera.updateProjectionMatrix();
  79.  
  80. renderer.render(scene, camera);
  81. }
  82.  
  83. function checkBodyActive(event) {
  84. // Checks, if the current body is active
  85. if(document.elementFromPoint(event.clientX, event.clientY) == container ||
  86. document.elementFromPoint(event.clientX, event.clientY) == renderer.domElement) {
  87. active = true;
  88. animate();
  89. }
  90. else {
  91. active = false;
  92. }
  93. }
  94.  
  95. function changeTexture(part) {
  96. // Will change the texture of the selected body part
  97. scene.children[part].traverse( function ( child ) {
  98. if (child instanceof THREE.Mesh) {
  99. // Texture must be changed
  100. if(scene.children[part].children[0].children[0].material.map.sourceFile=="images/texture2.jpg") {
  101. // Texture2 is already equipped, unequip it
  102. child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
  103. } else {
  104. // Equip texture2
  105. child.material.map = THREE.ImageUtils.loadTexture("images/texture2.jpg");
  106. }
  107. child.material.needsUpdate = true;
  108. }
  109. });
  110. }
  111.  
  112. function onWindowResize() {
  113. // This function will make sure that all proportions are correct after resizing the window
  114. windowHalfX = window.innerWidth / 2;
  115. windowHalfY = window.innerHeight / 2;
  116. camera.aspect = 1;
  117. camera.updateProjectionMatrix();
  118. }
  119.  
  120. function onClick(event) {
  121. // Mouse-Click-Event, used to check if intersects where hit
  122. event.preventDefault();
  123.  
  124. mouse.x = ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1;
  125. mouse.y = - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1;
  126. console.log(mouse);
  127. console.log(renderer);
  128.  
  129. // Create intersect raycasting
  130. raycaster.setFromCamera(mouse, camera);
  131. var intersects = raycaster.intersectObjects(scene.children, true);
  132. if(intersects.length) {
  133. var name = intersects[0].object.parent.parent.name;
  134. for(var j = 0; j < scene.children.length; j++ ) {
  135. if(scene.children[j].name == name) {
  136. // Found same model as the intersects, change texture
  137. changeTexture(j);
  138. }
  139. }
  140. }
  141. }
  142.  
  143. function prepareObj(object, name){
  144. // General configuration of the .obj files while loading
  145. object.position.y = -3;
  146. object.traverse(function(child) {
  147. if(child instanceof THREE.Mesh) {
  148. child.material.map = THREE.ImageUtils.loadTexture("images/texture.jpg");
  149. child.material.needsUpdate = true;
  150. }
  151. });
  152. object.name = name;
  153. scene.add(object);
  154. }
  155.  
  156. function animate() {
  157. // On every frame we need to calculate the new camera position
  158. // and have it look exactly at the center of our scene.
  159. if(active) {
  160. requestAnimationFrame(animate);
  161. controls.update();
  162. camera.lookAt(scene.position);
  163. renderer.render(scene, camera);
  164. }
  165. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement