STL Model Loader
Description
The STL model format is widely used for rapid prototyping, 3D printing and computer-aided manufacturing.
STL files describe only the surface geometry of a three-dimensional object without any representation of color, texture or other common 3d modelling attributes.
Code
./src/server/server.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import express from "express" import path from "path" import http from "http" const port: number = 3000 class App { private server: http.Server private port: number constructor(port: number) { this.port = port const app = express() app.use(express.static(path.join(__dirname, '../client'))) app.use('/build/three.module.js', express.static(path.join(__dirname, '../../node_modules/three/build/three.module.js'))) app.use('/jsm/controls/OrbitControls', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/controls/OrbitControls.js'))) app.use('/jsm/loaders/STLLoader', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/loaders/STLLoader.js'))) app.use('/jsm/libs/stats.module', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/libs/stats.module.js'))) this.server = new http.Server(app); } public Start() { this.server.listen(this.port, () => { console.log(`Server listening on port ${this.port}.`) }) } } new App(port).Start() |
./src/client/client.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import * as THREE from '/build/three.module.js' import { OrbitControls } from '/jsm/controls/OrbitControls' import { STLLoader } from '/jsm/loaders/STLLoader' import Stats from '/jsm/libs/stats.module' const scene: THREE.Scene = new THREE.Scene() const axesHelper = new THREE.AxesHelper(5) scene.add(axesHelper) var light = new THREE.DirectionalLight(); light.position.set(2.5, 7.5, 15) scene.add(light); const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.z = 3 const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer() renderer.outputEncoding = THREE.sRGBEncoding renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true const envTexture = new THREE.CubeTextureLoader().load(["img/px_25.jpg", "img/nx_25.jpg", "img/py_25.jpg", "img/ny_25.jpg", "img/pz_25.jpg", "img/nz_25.jpg"]) envTexture.mapping = THREE.CubeReflectionMapping const material = new THREE.MeshPhysicalMaterial({ color: 0xb2ffc8, envMap: envTexture, metalness: .25, roughness: 0.1, transparent: true, transmission: 1.0, side: THREE.DoubleSide, clearcoat: 1.0, clearcoatRoughness: .25 }); const loader = new STLLoader() loader.load( 'models/example.stl', function (geometry) { const mesh = new THREE.Mesh(geometry, material) scene.add(mesh) }, (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded') }, (error) => { console.log(error); } ); window.addEventListener('resize', onWindowResize, false) function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) render() } const stats = Stats() document.body.appendChild(stats.dom) var animate = function () { requestAnimationFrame(animate) controls.update() render() stats.update() }; function render() { renderer.render(scene, camera) } animate(); |