# How is it built?

**URL:** <https://discourse.threejs.org/t/how-is-it-built/80579>\
**Category:** Questions\
**Created:** [April 2, 2025, 12:43pm UTC](https://discourse.threejs.org/t/how-is-it-built/80579 "2025-04-02T12:43:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stouis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stouis/32/58397_2.png) [@Stouis](https://discourse.threejs.org/u/Stouis)\
**Post date:** [April 2, 2025, 12:43pm UTC](https://discourse.threejs.org/t/how-is-it-built/80579/1 "2025-04-02T12:43:39Z")

</div>

Hello,

I started learning three.js recently for a very specific reason, i just want to build a website like one of the examples from three.js

> **[Weedensenteret — Hva er egentlig cannabis?](https://www.weedensenteret.no/)**
>
> Sjekk ut hvordan cannabis kan påvirke hjernen og kroppen din.

Honestly, i don’t even know what would some things are called to google for it, so can someone tell me what is used to move camera like it is on the given website? I also notice that camera and objects are moving with mouse.

There is also one interesting thing, “+” buttons that are on the objects, i think you can somehow copy the position of an object, but what would be the best way to create this kind of button with text? I watched multiple tutorials and now i feel lost, because it is way bigger than i thought, so if someone can give little bit of guidance, it will be really helpful to wrap things up.

I don’t even need full answer of how to do it, I just need roadmap kind of thing that gets me to the point where i will make it.

Thank you in advance and have an awesome day everyone!

---

<div class="post-metadata">

**Author:** ![BRobat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brobat/32/56198_2.png) [@BRobat](https://discourse.threejs.org/u/BRobat)\
**Post date:** [April 2, 2025, 1:59pm UTC](https://discourse.threejs.org/t/how-is-it-built/80579/2 "2025-04-02T13:59:54Z")

</div>

This could be done by subscribing to the [scroll event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event) and updating camera every time it changes. As for the buttons I assume you can do it by also mapping window.scrollY and changing their position via CSS.

Feel free to ask if explanation is too shallow.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [April 2, 2025, 5:17pm UTC](https://discourse.threejs.org/t/how-is-it-built/80579/3 "2025-04-02T17:17:21Z")

</div>

If you don’t know _anything_ about Three.js, it’s always a good idea to start with the documentation.  
It starts out with an “installation” section, followed by a “Creating a scene” section.  
I propose to read those first, then ask **specific** questions about particular **details** you didn’t understand.

> **[three.js manual](https://threejs.org/manual/#en/creating-a-scene)**

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [April 3, 2025, 5:44am UTC](https://discourse.threejs.org/t/how-is-it-built/80579/4 "2025-04-03T05:44:17Z")

</div>

You’re not the first to ask how this website was built. I have to say, its minimalist design is quite pleasing.

> [@What’s the best approach to create a site like Weedensenteret.no with Three.js?](https://discourse.threejs.org/t/what-s-the-best-approach-to-create-a-site-like-weedensenteret-no-with-three-js/76424/3):
>
> Scroll Animation [YouTube: Three.js Scroll Animation](https://www.youtube.com/watch?v=rbIbvw6c53k)[Codrops: Crafting Scroll-Based Animations in Three.js](https://tympanus.net/codrops/2022/01/05/crafting-scroll-based-animations-in-three-js/)[Codrops: Scroll, Refraction, and Shader Effects in Three.js and React](https://tympanus.net/codrops/2019/12/16/scroll-refraction-and-shader-effects-in-three-js-and-react/) Lights and Environment [Mini Tutorial: Making Three.js Look Good/Realistic](https://discourse.threejs.org/t/mini-tutorial-on-making-threejs-look-good-realistic/47989)[YouTube - Three.js Realistic Lighting Setup Tutorial](https://www.youtube.com/watch?v=7GGNzryHfTw)[YouTube - Three.js Realistic Material Reflection Tutorial in 8 Minutes](https://www.youtube.com/watch?v=aJun0Q0CG_A) For the camera follow mouse effect, Check out this [thread](https://discourse.threejs.org/t/mouse-movement-to-move-camera/25643/3). @dubois, while I appreciate the dark humor, I don’t …