function STLViewerEnable(classname) { var models = document.getElementsByClassName(classname); for (var i = 0; i < models.length; i++) { STLViewer(models[i], models[i].getAttribute("data-src")); } } function STLViewer(elem, model) { if (!WEBGL.isWebGLAvailable()) { elem.appendChild(WEBGL.getWebGLErrorMessage()); return; } var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); var camera = new THREE.PerspectiveCamera(50, elem.clientWidth / elem.clientHeight, 1, 1000); renderer.setSize(elem.clientWidth, elem.clientHeight); elem.appendChild(renderer.domElement); window.addEventListener('resize', function () { renderer.setSize(elem.clientWidth, elem.clientHeight); camera.aspect = elem.clientWidth / elem.clientHeight; camera.updateProjectionMatrix(); }, false); var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.rotateSpeed = 0.05; controls.dampingFactor = 0.1; controls.enableZoom = false; controls.enablePan = false; controls.autoRotate = true; controls.autoRotateSpeed = 0.001; var scene = new THREE.Scene(); scene.add(new THREE.HemisphereLight(0xffffff, 0x080820, 1.5)); (new THREE.STLLoader()).load(model, function (geometry) { // Determine the color var colorString = elem.getAttribute("data-color") if(colorString != null) { var color = new THREE.Color(colorString); } else { var color = 0xff5533 } // Set up the material var material = new THREE.MeshPhongMaterial({ color: color, specular: 100, shininess: 100 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // Compute the middle var middle = new THREE.Vector3(); geometry.computeBoundingBox(); geometry.boundingBox.getCenter(middle); // Center it mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -middle.x, -middle.y, -middle.z ) ); // Rotate, if desired if(elem.getAttribute("data-rotate") == "x") mesh.rotation.x = -Math.PI/2 // Pull the camera away as needed var largestDimension = Math.max(geometry.boundingBox.max.x, geometry.boundingBox.max.y, geometry.boundingBox.max.z) camera.position.z = largestDimension * elem.getAttribute("data-zdistance"); var animate = function () { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }; animate(); }); }