Geek Answers Handbook

Need .js and HTML example to display .STL 3D objects on a web page

Can someone create a clean dummy HTML example to use STLLoader.js to display ASCII (not binary) .stl object files on a web page? The result should allow users to manipulate the object in current HTML5 browsers and without visible visual effects outside the surface and background of the object in shades of gray.

For STLLoader.js, you might need the help of three.js or three.min.js, but I do not know. STLLoader.js contains an example usage below, but does not include an HTML shell.

Example usage inside STLLoader.js

/** * Usage: * var loader = new THREE.STLLoader(); * loader.addEventListener( 'load', function ( event ) { * * var geometry = event.content; * scene.add( new THREE.Mesh( geometry ) ); * * } ); * loader.load( './models/stl/slotted_disk.stl' ); */
+8
3d webgl
source share
1 answer

Three.js examples are a good source:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html

Here is a simplified version:

 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - STL</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #000000; margin: 0px; overflow: hidden; } #info { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; } a { color: skyblue } </style> </head> <body> <div id="info"> STL loader test </div> <script src="http://threejs.org/build/three.min.js"></script> <script src="http://threejs.org/examples/js/loaders/STLLoader.js"></script> <script> var container, camera, scene, renderer; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); // renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); // scene scene = new THREE.Scene(); // camera camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set( 3, 0.5, 3 ); scene.add( camera ); // required, because we are adding a light as a child of the camera // lights scene.add( new THREE.AmbientLight( 0x222222 ) ); var light = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( light ); // object var loader = new THREE.STLLoader(); loader.load( 'slotted_disk.stl', function ( geometry ) { var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } ); window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function animate() { requestAnimationFrame( animate ); render(); } function render() { var timer = Date.now() * 0.0005; camera.position.x = Math.cos( timer ) * 5; camera.position.z = Math.sin( timer ) * 5; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> </body> </html>

three.js r.70

+9
source share

More articles:


All Articles