# Three.js on node.js

**URL:** <https://discourse.threejs.org/t/three-js-on-node-js/86553>\
**Category:** Questions\
**Created:** [August 27, 2025, 3:42am UTC](https://discourse.threejs.org/t/three-js-on-node-js/86553 "2025-08-27T03:42:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![threejsman](https://avatars.discourse-cdn.com/v4/letter/t/7ba0ec/32.png) [@threejsman](https://discourse.threejs.org/u/threejsman)\
**Post date:** [August 27, 2025, 3:42am UTC](https://discourse.threejs.org/t/three-js-on-node-js/86553/1 "2025-08-27T03:42:05Z")

</div>

Hello again,

can someone support me with a working example to run three.js on node.js and render objects and save the scene as an image?

I’ve been looking for a long time now and I am tired.

MANY!! thx in advance.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 27, 2025, 8:30am UTC](https://discourse.threejs.org/t/three-js-on-node-js/86553/2 "2025-08-27T08:30:57Z")

</div>

You can start with a threejs boilerplate that uses node

Here is one.

```javascript
git clone https://github.com/Sean-Bradley/Three.js-Boilerplate-TS-Vite.git
cd Three.js-Boilerplate-TS-Vite
npm install

```

Start it  
`npm run dev`

Visit [http://localhost:5173/](http://localhost:5173/) in your browser.

Now change files in the project

# ./src/main.ts

change

```diff
- const renderer = new THREE.WebGLRenderer()
+ const renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });

```

and add to the end of the `./src/main.ts` script

```javascript
const screenshotButton = document.getElementById('screenshotButton') as HTMLButtonElement
screenshotButton.addEventListener('click', () => {
  const link = document.createElement('a')
  link.download = 'screenshot.png'
  link.href = renderer.domElement.toDataURL('image/png')
  link.click()
})

```

# ./src/style.css

add

```javascript
#screenshotButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  z-index: 1;
}
#screenshotButton:hover {
  background-color: #0056b3;
}

```

# ./index.html

add to body tag

```diff
  <body>
+ <button id="screenshotButton">Take Screenshot</button>
    <script type="module" src="/src/main.ts"></script>
  </body>

```

After saving changes, your browser should already be running the latest code.

* * *

Here is the same example but using importmaps and all in one file

> **[Take a screenshot in Threejs](https://editor.sbcode.net/e77a15324611104409e21ed266cd9e4a96230868)**
>
> https://editor.sbcode.net/e77a15324611104409e21ed266cd9e4a96230868