Question about the forest scene shared in showcase

[Julien]

Hello everyone, im shapespark user since 3 years now
and i have to say it make me improve many step in javascript / html

but since im here i try to reproduce without success or even any clue or how to achieve

Finally open to the public: The Forest Showroom

[Showroom Faller] I am pleased to announce that the showroom we designed and developed for Keller/Faller a brush manufacturer from the Black Forest, is now available for public use. For the scene, we placed about 1,500 trees, over 100 rocks, more than 1,500 stones, and more than 10,000 loose leaves to create a vivid and appealing copy of the Black Forest. In addition to a relaxing soundscape of the forest, you can also hear the rushing of the streams, which increases as you get closer. So ma…

im autodidact baby programmer

i improved well my way to control and do html label + head and body customisation
i even manage to create youtube video gallery from here

and i even manage to somehow make some audio zone using a videoconference open source program on vps and with iframe, then add some setting in bodyend zone for audio :

the line for controlling those audio zone look like :
const triggers = [
{ point: {x: 1.3, y: -7.6, z: 1.5}, name: “accueil” },
{ point: {x: -2.8, y: 4, z: 1.6}, name: “accueil” },
{ point: {x: -2.7, y: 1.5, z: 1.6}, name: “accueil” },
{ point: {x: -0.5, y: -1.2, z: 1.5}, name: “accueil” },
{ point: {x: -1, y: 4.3, z: 1.6}, name: “reunion” },
{ point: {x: -3.7, y: -3.1, z: 4}, name: “table1” },
{ point: {x: -1.3, y: -6, z: 4}, name: “table2” },
{ point: {x: -0.93, y: 1.7, z: 1.6}, name: “cowork” },
{ point: {x: 1.2, y: -1.2, z: 1.6}, name: “cowork” }

its my only clue …

i tried just create a 3d cube inside my shapespark using only html and javascript command
but i never had luck until now

this forest scene is stunning cause the product page are really other level i think
and without asking the secret sauce i would love if someone can just teach me how create cube or plan using this technology ?

[lukasz]

It is not possible to create a 3D shape and place it in the scene using our API.

[Julien]

yeah i know but
someone understand just how he achieve this kind of menu ?
like the scene i shared … you have some brush selling and the menu is very cool and not usual
? do you know @lukasz how he achieved that ( not the exact tutorial ) but like the direction to search and learn

[Simon]

I did the programming for the scene.
I don’t wanna go too deep here, but you should start with understanding three.js in general.
This will help you understand what’s going on there. Took me pretty long to figure out how to do custom animations and audio.

The forrest scene is not ideal thogh, the programming could be more robust. But it was the first experiment then.

Our last experiment looked like this, we implemented now shapespark apps in more robust and clean react apps.

Shapespark example / animated door / clock / spatial audio

[Julien]

Hello Simon and thanks a lot for your answer
its what i was thinking i studied a bit three.js
and i even manage create some stuff with software like stackblitz editor
i downloaded three.js dependency and was able to use it

but i really dont know how load three.js in shapespark scene
i guess its the first wall i need to pass

my next attempt in my opinion is create the app first then i create object 3d usin tree.js then i start load the shapespark scene and maybe with a system of layer i can have the 2 world working together XD

[Simon]

I’m afraid it’s not that easy.

I’m not up to date, but as far as I know, shapepark is partly based on an old version of three.js.

Newer versions are not compatible without further ado.

You can’t just import the whole of three.js anyway, as there are bound to be conflicts.

I was able to adapt and integrate some functions at the time, but these were all from old versions.

But I would like to mention again that these are all things that Shapespark was not intended for.

Some functions will definitely be implemented in the future on request.

We mostly only use Shapespark for things it was intended for, with lots of visual and functional customization.

For everything else, we rely on completely individual programming with e.g. react three fiber.

[Julien]

Thanks Simon, for your reply!

Haha, I was definitely being a bit too optimistic! I know it’s not ideal to go against the intended use, but seeing some of your projects just makes me want to push my limits and challenge myself!

I got a little too confident when I managed to get the Jitsi API running on a VPS to create audio sessions—triggering and listening to events when the player reached certain 3D coordinates in body-end.

At first, I thought I could just create a plane based on vertex positions, slap some HTML as a texture, and still have time to grab a beer… But, as a former 3D animator, I’m honestly amazed at how powerful WebGL and Three.js are—rendering can be so impressive!

Shapespark is fantastic because 3D artists can pick it up super quickly. But yeah, it’s true, customers always want more interactivity!