Creating a webpage using Blender and Three.js

Name: Creating a webpage using Blender and Three.js
Rating: 3.3 (5 reviews)

basic tutorial to use blender and three.js to create a webpage that displays a 3d figure in it with animations

Created byOscar Villarreal

Last updated 9/2021

English

What you'll learn

Create a 3D figure with Blender
Assign an armature to the figure with Blender
Create 3 different animations for the figure with Blender
Create a Scenario with camera and lighting to export it and use it in the web page with blender
Configure the project with Visual studio code
display the 3D figure on a web page using Threejs
Control the animations using Javascript events

Course content

4 sections • 19 lectures • 1h 29m total length

Creating the 3d figure8:11
Model a cube in Blender, apply a solidify modifier for thickness, extrude flaps, add loop cuts and bevels, then fit Suzanne inside the box.
Adding materials4:58
Join Suzanne and the cube, create and assign multiple materials to faces, adjust base colors, and preview with viewport shading in Blender and Three.js.
Assigning the armature8:11
Add an armature with bones, position bones for the flaps and head, assign vertices to bone groups, and test in pose mode to rotate flaps and move the head.
Creating the animations13:40
Create and manage three Blender animations for an armature, using dope sheet and action editor, keyframes across frames 1, 12, 24, and 36, and stash as a non linear action.
Creating the scenario4:02
Add and position a camera and a point light, use G and axis keys to frame the box, duplicate lights, and prepare the scene for web export.
Saving as glb0:06
Texture for flare effect1:53
Create a 512x512 Krita texture for a light flare by painting a radial white gradient over a black background, adjusting the layer opacity, and saving the image.

Configuring the project6:54
Open the project in Visual Studio Code, install webpack and three, create src and dist folders, and run npm run build to generate main.js.
Displaying the figure in the page6:53
Display a Blender figure on the page using Three.js, set a full-width fixed canvas, load a glb model with GLTFLoader, and animate with requestAnimationFrame.
Adding the flare effect2:08
Learn to add lens flare to Blender lights in Three.js by loading a scene, creating Lensflare elements with a flare image and color, attaching them to point lights, then building.
Animating the flare3:45
Animate a flare in a Three.js scene by controlling size growth with flareCounter, flareCounterMax, flareGrowing, and flareGrowValue, iterating over point lights with forEach, and calling moveFlare in animate.
Animating the box4:37
Animate a box to float in space by using an armature with two target points, switching between them, and translating along an axis.
Page header5:00
Design a page header with a navigation bar using data-target and data-animation to trigger animations like home and ArmatureAction, featuring about and quality items linked to ArmatureAction.001 and ArmatureAction.002.
Playing the blender animations9:02
Learn to manage blender animations in a Three.js scene by wiring an animationMixer, clock, and animationsRef, loading glb animations, and controlling play, timescale, and looping with an animationManager.
Page content6:36
Create and reveal webpage sections using hr, article and section blocks, with a home/about/quality structure, show class, and fadeIn animation; modify index.js and build to verify interactive section changes.
Page footer3:24
Add a functional page footer by inserting social media icons with Fork Awesome via cdn, using i elements, creating a styled footer block with a separator, and saving the page.

Requirements

Basic understanding of Blender
Basic understanding of Javascript
Basic understanding of Image edition with krita (or similars like Gimp or Photoshop)
Basic understanding of Visual Studio Code

Description

Welcome to "Creating a webpage using Blender and Three.js".

Sometimes, the web developer do not have the knowledge to use Blender, or the 3D designer do not have knowledge to display the 3D figures in a web page.

This tutorial can help both, the developer and the designer to get an idea of how to use blender and three.js to create a basic website

In this tutorial

we will learn how to create a web page that will display a 3D figure created in Blender with different animations that you can control using javascript events.

We will use Blender to:

Create a 3D figure
Assign an armature to the figure
Create 3 different animations for the figure
Create a Scenario with camera and lighting to export it and use it in the web page.

We will use Visual Studio Code to:

Configure the project
display the 3D figure on a web page using Three.js
Control the animations using Javascript events

At the end, you will have a base project that you can modify freely for your needs.

Hope this can help you to get a basic knowledge to create your how projects.

If you have any question, please let me know in the comment section.

Thanks and have fun.

Who this course is for:

Web developers that want to implement 3D figures in the front end.
Designers that want to implement their 3d designs in a web page

Creating a webpage using Blender and Three.js

What you'll learn

Explore related topics

Course content

Blender7 lectures • 41min

Three.js9 lectures • 48min

End1 lecture • 1min

Resources2 lectures • 1min

Requirements

Description

Who this course is for: