Car Configurator Concept

Showcase
,
1

Demo here

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

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 with the car model in it:

If you want to support, you can leave a like on Behance :hand_with_index_finger_and_thumb_crossed:

7 Likes
2

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.

3 Likes
3

Thanks :pray:

We used this amazing model by the great Karol Miklas

2 Likes
4

15 miles per gallon also on this old thing :slight_smile:

2 Likes
5

Small update, we added smooth scrolling for a better experience

6

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

1 Like
7

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

this.raycaster.setFromCamera(this.mouse, this.camera);
const intersects = this.raycaster.intersectObject(this.touchSphere).length > 0;
this.isHovering = intersects;
1 Like
8

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’

1 Like
10

This article was really helpful for me: The Big List of three.js Tips and Tricks! | Discover three.js

1 Like
11

Thanks ill look into it

12

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