Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   threejs Чтение stl файла (https://javascript.ru/forum/library-toolkit-framework/43005-threejs-chtenie-stl-fajjla.html)

SnowShield 18.11.2013 12:58

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.