Physics practices for Three.js, Cannon and Blender.

Name: Physics practices for Three.js, Cannon and Blender.
Rating: 4.1 (20 reviews)

Step by step practices for Three.js, Cannon and Blender.

Created byOscar Villarreal

Last updated 4/2022

English

What you'll learn

Create 3D models in Blender.
UV Editing
Using Curve and Array Modifier
Exporting the scene to be used in different applications
Use Visual Studio Code as a work environment with webpack
Download the dependencies necessaries for the project
We will load our 3D model into a web page and run the simulation using Threejs and CANNON
Create a local server to run the project

Course content

2 sections • 18 lectures • 55m total length

Introduction0:45

Blender. Creating the domino3:36
Blender domino creation: delete default content, add a cube, enter edit mode, scale along x and y, insert loop cuts and bevel, inset faces, then extrude to complete the domino.
Blender. Texture and UV Editing5:05
Blender. Model details2:26
Bevel edges in Blender to add detail by selecting corner edges in edit mode, pressing Ctrl B, and scrolling the mouse wheel to control edge segments; repeat on side edges.
Blender. Creating the row. Pt 14:29
Blender. Creating the row. Pt 23:44
Blender. Fixing instances and overlaps1:49
Blender. UV Editing the other pieces2:30
Blender. Ground and Light3:49
Blender. Adjusting and Exporting1:32
VS Code. Configuring the project4:19
VS Code. Index.html1:40
VS Code. Index.js. Pt 14:14
Import Three.js, Cannon, and GLTFLoader in index.js; create the canvas, scene, renderer, light, and a group for content, and set up the camera with OrbitControls, CannonDebugger, and gravity.
VS Code. Index.js. Pt 24:46
VS Code. Index.js. Pt 32:17
Create an interactive GUI in index.js to control physics: set pause, add a 300-size GUI panel with pause and load buttons, and expose world.gravity via a folder.
VS Code. Index.js. Pt 43:04
VS Code. Building and Local Hosting2:11
Result3:25

Requirements

Basic understanding of Blender
Basic understanding of Javascript
Basic understanding of Visual Studio Code

Description

Hello and welcome.

If you are a developer or designer who is interested in create and 3D environment that can be used to simulate simple physics process that interact with other elements in the same scenario, this course is for you.

In this course we will focus on using Blender to create an scenario with multiples elements that will interact with each others and then we will configure that scenario to create a physic simulation using JavaScript, CANNON and Three.js.

We will create the scenario by using the tools provided by Blender like modifier and UV editing and the, we will configure our web project using Visual Studio Code.

In this course you will learn:

Create 3D models in Blender.
UV Editing
Using Curve and Array Modifier
Exporting the scene to be used in different applications.
Use Visual Studio Code as a work environment with webpack.
Download the dependencies necessaries for the project
We will load our 3D model into a web page and run the simulation using Three.js and CANNON
Create a local server to run the project

I hope that the content of this course will be useful to you and that you can apply it to your personal projects.

Have fun and happy learning.

Who this course is for:

Web developers
Designers that want to implement their 3d designs in a web page

Physics practices for Three.js, Cannon and Blender.

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Domino effect17 lectures • 55min

Requirements

Description

Who this course is for: