A React component for viewing an STL object from a given URL by utilizing Three.js

Last update: May 10, 2022

React STL Viewer

New maintainer needed.

A React component for viewing an STL object from a given URL by utilizing Three.js

Looking for contributors

See a live demo here.

Note that you will still have to abide by the rules of CORS so you won't just be able to load a 3D file from someone else's site

Installation

npm install stl-viewer

Usage

import STLViewer from 'stl-viewer'


   

Contributing

  • If you test the building of the dist, please do not commit those files.

Testing

  • Build with yarn run build
  • Run this in the root of the project folder python -m SimpleHTTPServer 8000
  • Visit http://0.0.0.0:8000 in your browser

GitHub

https://github.com/chiedolabs/react-stl-viewer/
Comments
  • 1. React 16

    Hi, @chiedo . What do you think about supporting latest react version? Also halogen library with loaders freezed and doesn't support it. I can do PR if you don't mind

    Reviewed by ostapch at 2017-11-06 16:02
  • 2. CORS limitation

    Hi, The CORS limitation can be avoided, this is mostly depending on the server's CORS configuration which might allow all origins to access the file.

    On the client side, the THREE.js loaders actually support this, but needs to have an attribute set: In STLViewer.js, right after: let loader = new THREE.STLLoader();, Setting loader.crossOrigin = '';, allows loading external STL files.

    I'm not if this should be set using an optional parameter or is this OK as a default, but anyway it works and removes the same origin limitation, as long as the server is configured correctly.

    Would love to hear your thoughts on this. Thanks!

    Reviewed by asafge at 2016-10-15 11:36
  • 3. colored STL files - enable showing binary colors of STL file

    I added the ability to read the binary colors of the file. now, if the file has colors, it will be seen. example for a colored file, from three.js official site: https://threejs.org/examples/models/stl/binary/colored.stl.

    note: in that case, when there is binary colors, the modelColor parameter does not needed and will not affect.

    Reviewed by mkantz84 at 2019-05-05 11:26
  • 4. fixed GPU memory leak.

    Currently, if you update any property, the STLViewer component will create an instance of the Paint class. Then the Paint class will create an instance of Scene, WebGLRenderer, etc. But it's not necessary to create them again. I'm not sure this will cause a memory leak or not but, creating a new Mesh and not removing the last one, definitely will(especially after updating the url property). Another case is when STLViewer component unmounts. We should deallocate the mesh, scene and WebGL renderer. I'm using this module on a project and by changing the STL file URL over and over, I got 1.5GB usage of GPU memory. After this fix, it only uses the memory it needs(with the same files the maximum usage was 132MB).

    Reviewed by jeangovil at 2019-01-08 13:41
  • 5. Refactor

    Hi I have refactored the code to avoid to duplicate logic, also I tried to add an style in the files, It would be amazing if we implemented some style guide like airbnb in next iterations 😄

    Reviewed by JuanCrg90 at 2018-03-02 00:37
  • 6. Loader not centered

    I've found an unpleasant behavior on loading file. Wrapper element much higher on loading and when it is loaded wrapper jumps to specified height.

    Also I get dig into your code and found the solution.

    Reviewed by ostapch at 2017-09-22 09:31
  • 7. Calculate mesh normals - the STL file might not include them

    Hey, This fixes an issue when some files are rendered "all black" even when the color is set. This happens because of missing normals data that the shader relies on.

    Reviewed by asafge at 2016-10-15 10:53
  • 8. added possibility to load a buffer and not only to load a file from url

    Hey guys, i made this little things that permits to load also a file directly and not only from an url. The PR create a breaking change:

    • url prop is removed
    • model prop is added. This can be a string (maintain the old behaviour) or an ArrayBuffer.

    I add a button in the example to recreate the upload behavior.

    NOTE: the Three.js file is all changed due to the autoformatter of my editor that change the tabs with the spaces. Now the file is aligned with the rest of the project.

    Reviewed by TinyTanic at 2019-02-18 22:22
  • 9. Light source rotates with user's orbiting

    When the model rotates freely, light source is static and we can see the model in the light from all sides. When user rotates the model manually by mouse drag, the lights rotate too - the sides of the model stay either in the light or in the shadow (and therefore the sides in the shadow are impossible to see).

    Reviewed by michalgerhat at 2022-02-10 10:51
  • 10. Is it possible to render without shadows???

    My current rendered object has a lot of shadows that is hiding some geometric details. Is there any way to turn off the shadow effect?? or perhaps reduce it to a minimum??

    Reviewed by Nalinc at 2020-10-13 14:28
  • 11. Require a more specific version of halogenium

    Currently, installing the package raises the following error: npm ERR! peer dep missing: [email protected]^4.3.2, required by [email protected]

    This is because in version 2.3.0 of halogenium, a peer dependency ([email protected]^4.3.2) was added to it.

    This PR specifies a more specific required version of halogenium to avoid this issue.

    Reviewed by TheYarin at 2020-05-02 13:31
  • 12. BeatLoader.js 'styled-components' error

    I'm having issues with a new project. I'm getting the following:

    Failed to compile.
    
    ./node_modules/halogenium/lib/BeatLoader.js
    Module not found: Can't resolve 'styled-components' in '/Users/user/Development/render-test/react/node_modules/halogenium/lib'
    

    Any suggestions?

    Reviewed by lbz-life at 2019-11-20 02:51
JavaScript course at the Udemy platform given by Professor Luiz Otávio Miranda
JavaScript course at the Udemy platform given by Professor Luiz Otávio Miranda

Javascript e TypeScript - front-end e back-end (Full Stack) - Node, Express, noSQL, React, hooks, Redux, Design Patterns Curso de JavaScript na platad

Jan 11, 2022
Lift a React component's state into the url
Lift a React component's state into the url

with-url-state Lifts the state out of a react component and into the url Hooks There is a hook based api available on the 3.0.0 branch, published as a

May 11, 2022
A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

May 29, 2022
A small 3D game built with react-three-fiber
A small 3D game built with react-three-fiber

Avoid the cubes while the speed progressively increases! Can you beat the rainbow level? The game is inspired by an old flash game I used to play in t

Jun 17, 2022
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Apr 7, 2022
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

May 5, 2022
Small React three fiber multiplayer template
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client ?? Getting started Getting started To quickly get started Clone

Jun 14, 2022
📬 postprocessing for react-three-fiber
📬  postprocessing for react-three-fiber

react-postprocessing react-postprocessing is a postprocessing wrapper for @react-three/fiber. This is not (yet) meant for complex orchestration of eff

Jun 15, 2022
In-browser lightmap/AO baker for react-three-fiber and ThreeJS
In-browser lightmap/AO baker for react-three-fiber and ThreeJS

react-three-lightmap In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS. Live editable sandbox. Local Developm

Jun 21, 2022
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber

About このアプリケーションは、React Three Fiberを使用したPost-processingの学習結果として作成したものです。 Post-pr

May 13, 2022
Gamedex built with React.js and Three.js
Gamedex built with React.js and Three.js

?? Gamedex Hello world! My internet name is Suboptimal and I am an Indian software engineer. Gamedex is the repo where I keep track of my game dev + c

Jun 20, 2022
React Three Fiber FPS control for mobile and desktop
React Three Fiber FPS control for mobile and desktop

React Three Fiber FPS control for mobile and desktop

Jun 26, 2022
vfx - a visual effects library for react-three-fiber
vfx - a visual effects library for react-three-fiber

vfx is a visual effects library for react-three-fiber. It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.

Jun 21, 2022
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React >= 16.8.0 Installation Using npm: $ npm install --save react-un

Jun 12, 2022
React component to blur image backgrounds using canvas.
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

Jun 5, 2022
📑 A React component to easily create demos of other components
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

May 22, 2022
A React component to view a PDF document
A React component to view a PDF document

React PDF viewer A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. // Core viewer import {

Jun 21, 2022
React file input component for complete control over styling and abstraction from file reading.

react-file-reader-input React file input component for complete control over styling and abstraction from file reading. <FileReaderInput as={dataForma

May 22, 2022
The react UI component for building complex filter criteria
 The react UI component for building complex filter criteria

React Filter Control The React component for building the composite filter criteria Demo (JS) | Demo (TS) Together With Data Table Overview Installati

May 22, 2022