Creating a Virtual Reality Web App with Blender and Three.js

Focused View

Oscar Villarreal

2:37:09

25 View

1. Introduction

1. Introduction.mp4

00:56

2. House

1. Blender instructions. pt1.mp4

01:23

2. Creating the base.mp4

06:20

3. Creating the entrances and windows. Pt 1.mp4

04:26

4. Creating the entrances and windows. Pt 2.mp4

03:19

5. Creating the roof and floor. Pt 1.mp4

03:22

6. Creating the roof and floor. Pt 2.mp4

02:21

7. Creating the roof and floor. Pt 3.mp4

04:12

8. Working with the walls.mp4

02:51

9.1 aerial beach.html

9.2 beige wall.html

9.3 forest leaves 02.html

9.4 large red bricks.html

9.5 tiled floor.html

9. Blender instructions. pt2.mp4

00:44

10. Working with textures. Pt 1.mp4

07:41

11. Working with textures. Pt 2.mp4

04:51

12. Working with textures. Pt 3.mp4

03:30

13. Working with textures. Pt 4.mp4

05:24

14. Fixing the figure.mp4

03:27

3. Scene

1. Creating the scene.mp4

06:38

2. Append the house.mp4

02:42

3. Exporting.mp4

01:34

4. VSCode configuration

1. Javascript instructions.mp4

02:04

2. Configuring webpack.mp4

03:46

3. Importing libraries.mp4

04:23

5. Writing the code

1. index.html and aframe elements.mp4

05:50

2. Base variables.mp4

04:15

3. scene update component.mp4

01:23

4.1 ammo.js.html

4. ammo.js files.mp4

02:14

5. MainScene function.mp4

04:54

6. loadGLBWithData function.mp4

04:31

7. scene custom update function.mp4

02:27

8. movement function.mp4

05:47

9. desktop rotation function.mp4

02:05

10.1 HDRIs - Drackenstein Quarry.html

10. panoramic image instructions.mp4

00:31

11. texture.mp4

00:53

6. Building

1. certificate.mp4

01:56

2. webpack.config.js.mp4

01:16

3. npm run build.mp4

02:51

4. local server.mp4

00:59

7. Testing the code

1. Result.mp4

03:56

8. Interactive object

1. Creating the base.mp4

03:10

2. Working with textures.mp4

03:38

3. Custom property.mp4

02:20

4. Fixing the figure.mp4

00:58

9. Reworking the scene

1. Append the frame.mp4

02:22

2. Exporting.mp4

01:11

10. Coding the interaction

1. Proxy.mp4

02:55

2. Raycaster.mp4

02:09

3. Text panel.mp4

03:43

4. action button.mp4

02:09

5. Remove debugger.mp4

00:58

11. Testing the interaction

1. Result.mp4

02:22

12. Live demo

1. PC and joystick.mp4

03:05

2. VR Headset and joystick.mp4

03:58

13. End

1.1 Course Resources.zip

1. final message.mp4

00:29

Description

Step by Step Virtual Reality Web App with Blender and Three.js

What You'll Learn?

Create a Virtual Reality Web App to use with your smartphone
Create a 3D Scenario with Blender
Create a webpack project with VSCode
Load a 3D Model in a VR Environment
Add Physics to concave models
Read joystick inputs with javascript
Display 3D Text Panels in a VR Environment
Work with Threejs, enable3D and aframe

Who is this for?

Web developers that want to create a VR App

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

What You Need to Know?

Basic understanding of Blender

Basic understanding of Javascript

Basic understanding of Visual Studio Code

More details

Description
Hello and welcome.
If you are a web developer or designer interested in creating a web page that has the ability to use your smartphone for a virtual reality environment, this course is for you.
This course is focused on using Blender, Javascript and Three.js to create an virtual reality application.
We are also going to use javascript libraries like aframe to easily configure the vr environment and enable 3d to configure the physics of the scene.
We will create step by step the 3D models, the configuration of our development environment, the code to create the application and the deployment in a local server.
In this course you will learn:
Create a Virtual Reality Web App to use with your smartphone
Create a 3D Scenario with Blender
Create a webpack project with VSCode
Load a 3D Model in a VR Environment
Add Physics to concave models
Read joystick inputs with javascript
Display 3D Text Panels in a VR Environment
Work with Threejs, enable3D and aframe
You may find this course attractive because it can serve as the basis for creating a prototype virtual reality app that you can customize.
In addition, you will have access to the content created during the course.
I hope you find the content useful and that you can apply it to your personal projects.
Have fun and happy learning.
Who this course is for:
Web developers that want to create a VR App
Designers that want to implement their 3d designs in a web page

User Reviews

Rating

average 0

Total votes0

Focused display

Hello, my name is Oscar Villarreal.I'm a software developer with over 10 years of experience working mostly with web technologies like html,css and javascript in the front end.I like open source technologies and most of the projects that i used to participate tended to look for that kind technology to reduce the cost and to allow further customization.So, i would like to share a little of what i know about open source solutions.Hope you find something useful here.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.