threejs Чтение stl файла
Пытаюсь с помощью threejs считать файл с диска и отобразить. Файл - бинарный stl. В результате сцена окрашивается в алый цвет (думаю проблемы с камерой) либо вообще ничего не отображается. В консоли вижу строчку "THREE.WebGLRenderer 61 three.min.js:417". Прошу помочь.
Код: <html> <meta charset="utf-8"> <head> <title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <input type="file" id="filein"/> <script src="js/three.min.js"></script> <script> document.getElementById('filein').addEventListener('change', readSingleFile, false); function readSingleFile(evt) { var f = evt.target.files[0]; var reader = new FileReader(); reader.readAsArrayBuffer(f); reader.onload = function(evt){ var geometry=parseStlBinary(reader.result); var material = new THREE.MeshBasicMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } } //Creating the scene var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = 5; //rendering var render = function () { requestAnimationFrame(render); renderer.render(scene, camera); }; render(); var parseStlBinary = function(stl) { // create three.js geometry object var geometry = new THREE.Geometry(); // The stl binary is read into a DataView for processing var dv = new DataView(stl, 80); // 80 == unused header var isLittleEndian = true; // Read a 32 bit unsigned integer var triangles = dv.getUint32(0, isLittleEndian); var offset = 4; for (var i = 0; i < triangles; i++) { // Get the normal for this triangle by reading 3 32 but floats var normal = new THREE.Vector3( dv.getFloat32(offset, isLittleEndian), dv.getFloat32(offset+4, isLittleEndian), dv.getFloat32(offset+8, isLittleEndian) ); offset += 12; // Get all 3 vertices for this triangle, each represented // by 3 32 bit floats. for (var j = 0; j < 3; j++) { geometry.vertices.push( new THREE.Vector3( dv.getFloat32(offset, isLittleEndian), dv.getFloat32(offset+4, isLittleEndian), dv.getFloat32(offset+8, isLittleEndian) ) ); offset += 12 } // there's also a Uint16 "attribute byte count" that we // don't need, it should always be zero. offset += 2; // Create a new face for from the vertices and the normal geometry.faces.push(new THREE.Face3(i*3, i*3+1, i*3+2, normal)); } return(geometry); }; </script> </body> </html> |
Часовой пояс GMT +3, время: 08:44. |