API tools faq
paste
Guest User

Draco plus MTL - Not rendering

a guest
Jan 8th, 2019
212
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title>three.js webgl - loaders - Draco loader</title>
  6. <style>
  7. body {
  8. font-family: Monospace;
  9. background-color: #000;
  10. color: #fff;
  11. margin: 0px;
  12. overflow: hidden;
  13. }
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <div id="page-wrapper">
  19. <h1>Open a draco compressed file (.drc):</h1>
  20. <div>
  21. <input type="file" id="fileInput">
  22. </div>
  23. </div>
  24. <div>
  25. <pre id="decoderType"><pre>
  26. </div>
  27. <div>
  28. <pre id="fileDisplayArea"><pre>
  29. </div>
  30. <script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
  31. <script src="DRACOLoader.js"></script>
  32. <script src="MTLLoader.js"></script>
  33. <script src="geometry_helper.js"></script>
  34. <script>
  35. 'use strict';
  36.  
  37. // Configure decoder and create loader.
  38. THREE.DRACOLoader.setDecoderPath( '../' );
  39. var dracoLoader = new THREE.DRACOLoader();
  40.  
  41. // (Optional) Pre-fetch decoder source files.
  42. THREE.DRACOLoader.getDecoderModule();
  43.  
  44. var camera, cameraTarget, scene, renderer;
  45.  
  46. function init() {
  47. var container = document.createElement('div');
  48. document.body.appendChild(container);
  49.  
  50. camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15);
  51. camera.position.set(3, 0.15, 3);
  52. cameraTarget = new THREE.Vector3(0, 0, 0);
  53.  
  54. scene = new THREE.Scene();
  55. scene.fog = new THREE.Fog(0x72645b, 2, 15);
  56.  
  57. // Ground
  58. var plane = new THREE.Mesh(
  59. new THREE.PlaneBufferGeometry(40, 40),
  60. new THREE.MeshPhongMaterial({color: 0x999999, specular: 0x101010}));
  61. plane.rotation.x = -Math.PI/2;
  62. plane.position.y = -0.5;
  63. scene.add(plane);
  64. plane.receiveShadow = true;
  65.  
  66. // Lights
  67. scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
  68. addShadowedLight(1, 1, 1, 0xffffff, 1.35);
  69. addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
  70.  
  71. // renderer
  72. renderer = new THREE.WebGLRenderer({antialias: true});
  73. renderer.setClearColor(scene.fog.color);
  74. renderer.setPixelRatio(window.devicePixelRatio);
  75. renderer.setSize(window.innerWidth, window.innerHeight);
  76. container.appendChild(renderer.domElement);
  77. window.addEventListener('resize', onWindowResize, false);
  78. }
  79.  
  80. function addShadowedLight(x, y, z, color, intensity) {
  81. var directionalLight = new THREE.DirectionalLight(color, intensity);
  82. directionalLight.position.set(x, y, z);
  83. scene.add(directionalLight);
  84. }
  85.  
  86. function onWindowResize() {
  87. camera.aspect = window.innerWidth / window.innerHeight;
  88. camera.updateProjectionMatrix();
  89. renderer.setSize(window.innerWidth, window.innerHeight);
  90. }
  91.  
  92. function animate() {
  93. requestAnimationFrame(animate);
  94. render();
  95. }
  96.  
  97. function render() {
  98. var timer = Date.now() * 0.0005;
  99. camera.position.x = Math.sin(timer) * 2.5;
  100. camera.position.z = Math.cos(timer) * 2.5;
  101. camera.lookAt(cameraTarget);
  102. renderer.render(scene, camera);
  103. }
  104.  
  105. window.onload = function() {
  106. var fileInput = document.getElementById('fileInput');
  107. var fileDisplayArea = document.getElementById('fileDisplayArea');
  108.  
  109. fileInput.onclick = function() {
  110. this.value = '';
  111. }
  112.  
  113. //new
  114. var num = 0;
  115. var object = new THREE.Object3D();
  116. var scale = 1;
  117.  
  118. fileInput.addEventListener('change', function(e) {
  119. //new
  120. num ++;
  121. var file = this.files[0];
  122. var name = this.files[0].name;
  123. var objName = name.split(".")[1];
  124. var file = fileInput.files[0];
  125.  
  126. var reader = new FileReader();
  127. reader.onload = function(e) {
  128. // Enable logging to console output.
  129. dracoLoader.setVerbosity(1);
  130.  
  131. // To use triangle strips use:
  132. // dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
  133. dracoLoader.setDrawMode(THREE.TrianglesDrawMode);
  134.  
  135. // Skip dequantization of the position attribute. It will be done on the GPU.
  136. dracoLoader.setSkipDequantization('position', true);
  137. dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
  138. if (dracoLoader.decode_time !== undefined) {
  139. fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
  140. 'Import time = ' + dracoLoader.import_time;
  141. }
  142. var material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
  143. // If the position attribute is quantized, modify the material to perform
  144. // dequantization on the GPU.
  145. if (bufferGeometry.attributes['position'].isQuantized) {
  146. // setDequantizationForMaterial(material, bufferGeometry);
  147. }
  148.  
  149. //new
  150. var mesh;
  151. // Point cloud does not have face indices.
  152. var mtlLoader = new THREE.MTLLoader();
  153. mtlLoader.setPath( 'models/' );
  154. mtlLoader.load( 'bed.mtl', function( materials ) {
  155. materials.preload();
  156.  
  157. // var geometry;
  158. // Point cloud does not have face indices.
  159. if (bufferGeometry.index == null) {
  160. mesh = new THREE.Points(bufferGeometry, materials.materials[objName]);
  161. } else {
  162. if (bufferGeometry.attributes.normal === undefined) {
  163. var geometryHelper = new GeometryHelper();
  164. geometryHelper.computeVertexNormals(bufferGeometry);
  165. }
  166. mesh = new THREE.Mesh(bufferGeometry, materials.materials[objName]);
  167. mesh.drawMode = dracoLoader.drawMode;
  168. }
  169. // Compute range of the mesh coordinates for proper rendering.
  170. if (num === 1) {
  171. bufferGeometry.computeBoundingBox();
  172. if (bufferGeometry.attributes['position'].isQuantized) {
  173. // If the mesh is quantized, transform the bounding box to the dequantized
  174. // coordinates.
  175. var posAttribute = bufferGeometry.attributes['position'];
  176. var normConstant =
  177. posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
  178. var minPos = posAttribute.minValues;
  179. bufferGeometry.boundingBox.max.x = minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
  180. bufferGeometry.boundingBox.max.y = minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
  181. bufferGeometry.boundingBox.max.z = minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
  182. bufferGeometry.boundingBox.min.x = minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
  183. bufferGeometry.boundingBox.min.y = minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
  184. bufferGeometry.boundingBox.min.z = minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
  185. }
  186. var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
  187. var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
  188. var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
  189. var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
  190. scale = 1.0 / diagonalSize;
  191. var midX = (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
  192. var midY = (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
  193. var midZ = (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;
  194. }
  195. // mesh.scale.multiplyScalar(scale);
  196. // mesh.position.x = -midX * scale;
  197. // mesh.position.y = -midY * scale;
  198. // mesh.position.z = -midZ * scale;
  199. mesh.castShadow = true;
  200. mesh.receiveShadow = true;
  201. var selectedObject = scene.getObjectByName("my_mesh");
  202. scene.remove(selectedObject);
  203. var drcLength = 0;
  204. for (var prop in materials.materials) {
  205. drcLength ++;
  206. }
  207. if (num < drcLength) {
  208. object.add(mesh);
  209. }else{
  210. object.add(mesh);
  211. object.scale.multiplyScalar(scale);
  212. scene.add(object);
  213. }
  214. object.name = "my_mesh";
  215. });
  216. });
  217. }
  218. reader.readAsArrayBuffer(file);
  219. });
  220. init();
  221. animate();
  222. }
  223.  
  224. function setDequantizationForMaterial(material, bufferGeometry) {
  225. material.onBeforeCompile = function(shader) {
  226. // Add uniform variables needed for dequantization.
  227. var posAttribute = bufferGeometry.attributes['position'];
  228. shader.uniforms.normConstant =
  229. { value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
  230. shader.uniforms.minPos = { value: posAttribute.minValues };
  231.  
  232. shader.vertexShader = 'uniform float maxRange;\n' +
  233. 'uniform float normConstant;\n' +
  234. 'uniform vec3 minPos;\n' +
  235. shader.vertexShader;
  236. shader.vertexShader = shader.vertexShader.replace(
  237. '#include <begin_vertex>',
  238. 'vec3 transformed = minPos + position * normConstant;'
  239. );
  240. }
  241. }
  242. </script>
  243. </body>
  244. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!