How To Make Your Own 3D Website - 3D Table Configurator Tutorial With Rete

How To Make Your Own 3D Website - 3D Table Configurator Tutorial With Rete

Bit By Bit Developers

1 месяц назад

137 Просмотров

In this tutorial we will code a very simple 3D table configurator in Rete editor on bitbybit.dev web cad platform. Then we will export this code and execute it on separate static website on StackBlitz. Matas will set up some basic HTML, CSS and JavaScript for this tutorial without using any 3rd party frameworks so that you would see how you can use pure web platform for your sites.

This tutorial is part of the course: Make Your Own 3D Website
Find previous tutorial here:
https://youtu.be/7WyI4EtnlKY

#3dtable #3dconfigurator #furniture #3dfurniture #configuratorfurniture #rete #retejs #javascript #html #css #bitbybitdev #cad #3d #3dwebsite #webcad #makewebsite #howtocode #creativecoding #creativecode #website #webdev #js #occt #introduction #tutorial #learn #lecture #code #design #computationaldesign #parametricdesign #parametric #gamedev #onlinecourse #3dscan #3dprint #diy #webdevelopment #frontend #3dfrontend #3dweb #gameengine #visualprogramming #virtualreality #3dmodels #3dmodeling #indiedev #onlinelecture #stackblitz #opencascade #computationaldesign #webprogramming #3dwebsite

00:00 Showing off the 3D table configurator that we will build in this tutorial
01:15 Explaining our setup on which we will begin coding the website
02:00 Set up HTML range slider input for width
03:25 Adapt JavaScript code for sending multiple inputs to our scripts
06:58 Finish implementing inputs in HTML for length, height and thickness sliders
09:35 Start coding environment in parametric visual programming editor called Rete
10:03 Set up the runner inputs that we will receive into rete
12:55 Create 3D table top
15:05 Create 3D legs for the table
19:25 Create ground plane
19:55 Create compound shape that includes all shapes for drawing the mesh
21:30 Return table mesh to the runner
21:48 Export Rete script to Runner JavaScript
21:55 Import exported script to your website
22:05 Test app

Тэги:

#JavaScript #3D #CAD #HTML #CSS #WebGL #Your_Own_Website #DIY #Do_it_yourself #Learn #Tutorial #Learn_to_code #How_to #Education #OpenCascade #Bitbybit_Runner #Introduction #3D_Websites #Make_your_own_websites #Make_3D_website #Visual_Programming #3D_Models #3D_Modeling #StackBlitz #TypeScript #Coding #Code #Programming #Create_3D_Website #Rete #ReteJS #Parametric #Parametric_Design #Gameification #Simulation #3D_Configurator #3D_Table #3D_Table_Configurator #3D_Furniture #Furniture_Design #OCCT
Ссылки и html тэги не поддерживаются


Комментарии: