Пытаюсь с помощью 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>
