# Car Configurator Concept

**URL:** <https://discourse.threejs.org/t/car-configurator-concept/51190>\
**Category:** Showcase\
**Tags:** configurator, blender\
**Created:** [May 4, 2023, 5:23pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190 "2023-05-04T17:23:59Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Niccolo\_Fanton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/niccolo_fanton/32/37400_2.png) [@Niccolo\_Fanton](https://discourse.threejs.org/u/Niccolo_Fanton)\
**Post date:** [May 4, 2023, 5:23pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/1 "2023-05-04T17:23:59Z")

</div>

[Demo here](https://car.niccolofanton.dev)

This is a car configurator concept I made with three.js, I hope you like it 😄

Features:

- 1:1 animations on scroll
- Change colors/details
- Export screenshots in high quality
- Dynamic elements

You can also visit a virtual room create on [DUNA](https://discourse.threejs.org/t/duna-mini-game-virtual-environments-showcase/48863) with the car model in it:

If you want to support, you can [leave a like on Behance 🫰](https://www.behance.net/gallery/169860265/Car-Configurator-Concept)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 6, 2023, 3:25pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/2 "2023-05-06T15:25:20Z")

</div>

It looks nice!

What I like most – the fine details, like the water drops on the surface.  
What shocked me most – the contrast between the quality of the car and the cheap pine-shaped air freshener.

---

<div class="post-metadata">

**Author:** ![Niccolo\_Fanton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/niccolo_fanton/32/37400_2.png) [@Niccolo\_Fanton](https://discourse.threejs.org/u/Niccolo_Fanton)\
**Post date:** [May 6, 2023, 5:52pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/3 "2023-05-06T17:52:21Z")

</div>

Thanks 🙏

We used this [amazing model](https://sketchfab.com/3d-models/free-1975-porsche-911-930-turbo-8568d9d14a994b9cae59499f0dbed21e) by the great Karol Miklas

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 6, 2023, 6:51pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/4 "2023-05-06T18:51:57Z")

</div>

15 miles per gallon also on this old thing 🙂

---

<div class="post-metadata">

**Author:** ![Niccolo\_Fanton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/niccolo_fanton/32/37400_2.png) [@Niccolo\_Fanton](https://discourse.threejs.org/u/Niccolo_Fanton)\
**Post date:** [May 12, 2023, 8:17am UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/5 "2023-05-12T08:17:19Z")

</div>

Small update, we added smooth scrolling for a better experience

---

<div class="post-metadata">

**Author:** ![longtime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/longtime/32/33303_2.png) [@longtime](https://discourse.threejs.org/u/longtime)\
**Post date:** [June 16, 2023, 1:51am UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/6 "2023-06-16T01:51:59Z")

</div>

thanks for sharing. You setup point for each circle white? when you click circle white, you get point and use tween zoom in it?

---

<div class="post-metadata">

**Author:** ![Niccolo\_Fanton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/niccolo_fanton/32/37400_2.png) [@Niccolo\_Fanton](https://discourse.threejs.org/u/Niccolo_Fanton)\
**Post date:** [June 20, 2023, 8:28am UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/7 "2023-06-20T08:28:39Z")

</div>

It’s a custom component made in Angular, but basically, it’s a Raycaster checking collision on an invisible sphere slightly bigger than the visible one.

This is the basic code

```javascript
this.raycaster.setFromCamera(this.mouse, this.camera);
const intersects = this.raycaster.intersectObject(this.touchSphere).length > 0;
this.isHovering = intersects;

```

---

<div class="post-metadata">

**Author:** ![Deevannagari\_Ajith](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deevannagari_ajith/32/56162_2.png) [@Deevannagari\_Ajith](https://discourse.threejs.org/u/Deevannagari_Ajith)\
**Post date:** [January 29, 2025, 5:34pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/8 "2025-01-29T17:34:46Z")

</div>

Hi @Niccolo_Fanton can you please give some idea how to optimize this 3d webapps. if you have any article that your have written or any docs about that would help me a lot I im building a configurator thanks in advance, also I would like to know how the state changes can be handled in react for threejs i use ‘React 3d fiber’

---

<div class="post-metadata">

**Author:** ![Niccolo\_Fanton](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/niccolo_fanton/32/37400_2.png) [@Niccolo\_Fanton](https://discourse.threejs.org/u/Niccolo_Fanton)\
**Post date:** [January 29, 2025, 6:25pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/10 "2025-01-29T18:25:22Z")

</div>

This article was really helpful for me: [The Big List of three.js Tips and Tricks! | Discover three.js](https://discoverthreejs.com/tips-and-tricks)

---

<div class="post-metadata">

**Author:** ![Deevannagari\_Ajith](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deevannagari_ajith/32/56162_2.png) [@Deevannagari\_Ajith](https://discourse.threejs.org/u/Deevannagari_Ajith)\
**Post date:** [January 29, 2025, 8:18pm UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/11 "2025-01-29T20:18:16Z")

</div>

Thanks ill look into it

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [February 26, 2025, 4:19am UTC](https://discourse.threejs.org/t/car-configurator-concept/51190/12 "2025-02-26T04:19:08Z")

</div>

Looks really neat! Congratulation. I wanna ask, when moving the camera to the lamp, did u do it dynamically?