Verge3D Wiki - User contributions [en]

Making 3D web apps with Blender and Three.js

2021-12-02T08:34:39Z

Yuri: /* Building the pipeline */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, then code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better — Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on GitHub (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.
# For anything beyond loading a mere model you can refer to myriad of [https://threejs.org/examples/#webgl_animation_keyframes Three.js examples].

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server — Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:19:02Z

Yuri: /* Approach #2: Verge3D */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, then code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better — Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on GitHub (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server — Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:17:04Z

Yuri: /* Creating the main HTML file */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, then code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better — Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on GitHub (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:14:25Z

Yuri: /* Approach #1: Vanilla Three.js */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, then code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better — Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:12:23Z

Yuri:

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, then code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:09:25Z

Yuri: /* Which approach to choose? */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] is not a big deal for you (or your company), you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:08:39Z

Yuri: /* Which approach to choose? */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — it's free! Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or sell your work without paying a buck first.

On the other hand, if paying some money for a [https://www.soft8soft.com/licensing/ license] license is not a big deal for you or your company, you might consider Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:06:24Z

Yuri: /* Approach #2: Verge3D */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. As a result, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how can we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T11:03:33Z

Yuri: /* Approach #2: Verge3D */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, instead of programmers, in charge of a project.

The toolkit costs some money, but you can experiment with a trial version the only limitation of which is that shows a watermark. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does this all for you.

The WebGL rendering is usually consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, i.e. it first exports the scene to a glTF 2.0 asset, and then loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:58:16Z

Yuri: /* Building the pipeline */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the starter project to quickly create and deploy your apps. Feel free to upgrade that template - it's all open-source.
# It's much easier to load a single HDR map for environment lighting, than to tweak multiple light sources with JavaScript. And it works faster!
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender. This will save you a great deal of coding.
# Take some time to learn more about glTF 2.0, so that you fully understand the limitations and constraints of this format.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:32:06Z

Yuri: /* Running a web server */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it as '''server.py'''. In Blender, switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', locate and open that script, then click the 'Play' icon to launch the server:

[[File:blender_run_script.jpg|843px]]

This server will be running in the background until you close Blender. Cool, yeah?

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:29:31Z

Yuri: /* Running a web server */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

If we have Python in Blender, why not use it? Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:27:10Z

Yuri: /* Running a web server */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we must use it! Let's create a basic Python script with the following content (or just copy the file from the starter project):

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:22:45Z

Yuri: /* Creating the main HTML file */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

You can find this file in the starter project on Github (linked above). So, what is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:18:33Z

Yuri: /* Creating the Blender scene */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems to be pretty straightforward for a Blender artist, right? Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

* And so on. Other things come on the need-to-know basis.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:16:09Z

Yuri: /* Approach #1: vanilla Three.js */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems pretty straightforward. Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:15:37Z

Yuri: /* Approach #1: Vanilla Three.js */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems pretty straightforward. Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:14:51Z

Yuri: /* Creating the Blender scene */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems pretty straightforward. Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. Again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:14:08Z

Yuri: /* Creating the Blender scene */

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This step seems pretty straightforward. Well, you must get familiar with the limitations of the glTF 2.0 format, and WebGL in general! Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:11:53Z

Yuri:

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach #2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T10:11:03Z

Yuri:

[[Category:Tutorials]]{{#seo:
|description=This tutorial discusses how to use Blender and Three.js to create interactive 3D web applications.
|keywords=Three.js, Blender, 3D, WebGL, 3DWeb, Web3D
|image=blender_plus_threejs.png
}}
[[File:blender_plus_threejs.png|right|thumb]]
It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

This tutorial mostly covers the vanilla Three.js approach. In the end, some info about Verge3D will be provided as well.

== Approach #1: Vanilla Three.js ==

=== Intro ===

We suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:56:49Z

Yuri: /* Approach 1: glTF + Coding */

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Intro ===

Suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to reproduce it step by step for yourself, you can proceed to downloading the complete [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:53:20Z

Yuri: /* Approach 1: glTF + Coding */

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Intro ===

Suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. You will have to use the command-line interpreter to operate all these. This tool chain looks familiar to seasoned web developers. Still, using it with Three.js can turn out to be quite non-trivial, especially for people with little or no coding skills (e.g. for Blender artists who might even have some experience in Python scripting).

An easier way is to just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python.

This latter approach is exactly what we are discussing in this tutorial. If you don't want to read it, you can proceed to downloading the [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender starter project]. Ok, let's begin!

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:39:37Z

Yuri: /* Prerequisites */

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these tools. This tool chain looks familiar to seasoned web developers. Still, using them with Three.js can turn out to be quite non-trivial, especially for people with limited or no coding skills (e.g. for Blender artists who might have some experience in Python scripting).

Alternatively, you can just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python. This is exactly how we did with this [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender template].

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:39:10Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these tools.

This tool chain looks familiar to seasoned web developers. Still, using them with Three.js can turn out to be quite non-trivial, especially for people with limited or no coding skills (e.g. for Blender artists who might have some experience in Python scripting).

Alternatively, you can just copy the static Three.js build into your project folder, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run some web server to open the app. Even better - Blender has Python, so you can just launch the standard web server that comes with Python. This is exactly how we did with this [https://github.com/Soft8Soft/threejs-blender-template Three.js-Blender template].

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:31:55Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from [https://www.blender.org/download/ here] and just run the installer.

With Three.js however, it's not that easy! The official Three.js [https://threejs.org/docs/#manual/en/introduction/Installation installation guide] recommends using the NPM package manager, as well as the JS module bundling tool called ''webpack''. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these tools.

This tool chain looks familiar to seasoned web developers. Still, using them with Three.js can turn out to be quite non-trivial, especially for people with limited or no coding skills (e.g. for Blender artists who might have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:26:04Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender. Code a Three.js application to load the scene into it.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download] - and just run the installer.

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:22:59Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. So, how can we make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, and load the scene into a Three.js application.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download] - and just run the installer.

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:20:46Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. Ok, how we can make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, and create a new Three.js application from scratch.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download] - and just run the installer.

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Under the hood, these blocks are converted to JavaScript that calls Verge3D APIs. You still can write your own JavaScript, or even add new visual blocks as plugins. In any case, Verge3D remains compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many other useful features, including the App Manager, AR/VR integration, WordPress plugin, Cordova/Electron builders, a physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to these [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach to choose? ==

Three.js offers a feature that is quite convincing — its free. Blender is free too, and if you got plenty of time, you are all set! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other hand, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you might stick to Verge3D. And this is not only because it's a more powerful variant of Three.js that will help you meet a deadline. Verge3D is designed to be an artist-friendly tool that is worth looking into if you're using Blender in your pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T09:07:31Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. Ok, how we can make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, and create a new Three.js application from scratch.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download] - and just run the installer.

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

A typical approach for creating web apps with Three.js and Blender is recommended below:

# Use the template to deploy your apps quickly. Feel free to upgrade the template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting, than tweaking multiple light sources with JavaScript.
# Blender comes first, Three.js goes second. This means you should try to design as much as possible in Blender to reduce the amount of complex graphics coding.
# Take some time to learn more about glTF 2.0, to get its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is kinda Three.js on steroids. It includes a bunch of tools to sweeten the creation of 3D web content based on Blender scenes. Basically, this toolkit puts artists, and not coders, in charge of a project.

The toolkit costs some money, but there is a trial version without time or feature limitations. Installation is fairly simple: [https://www.soft8soft.com/get-verge3d get] the installer (Windows) or zip archive (macOS, Linux), then enable the Blender add-on that is shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a convenient preview feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

This magic button exports the Blender scene in a temporary location and immediately opens it in the web browser:

[[File:v3d_app.jpg|1000px]]

There is no need to create a project from scratch, write any JavaScript, or care about the web server - Verge3D does it all for you.

The WebGL rendering is consistent with Blender viewport (especially if you switch to the real-time renderer Eevee). This is because Verge3D tries to accurately reproduce most Blender features, such as native node-based materials, lighting, shadows, animation, morphing, etc. It works similar to vanilla Three.js, that is it exports to the glTF 2.0 asset and loads it in the browser via JavaScript... except you don't need to write any code.

But how we make the app interactive, if not by JavaScript code? Verge3D does it differently as it comes with a Scratch-like scripting environment called Puzzles. For example, to convert the default Blender cube to a nice spinning Utah teapot you can employ the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Behind the scene, these blocks are converted to JavaScript which in turn trigger Verge3D APIs. If you need it, you can write your own JavaScript logic or create your own visual blocks. Also, Verge3D is compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many useful features, including App Manager, AR/VR, WordPress integration, Cordova/Electron builders, physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to the [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach is better? ==

Three.js has one feature that is quite convincing — its free. Basically, if Blender is free, Three.js is free, and your time is free you are just great! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other side, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you better stick to Verge3D. Not only because its more powerful yet compatible with Three.js. Verge3D is designed to be an artist-friendly tool, so it will be very helpful if you already use or going to use Blender in your development pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T08:51:11Z

Yuri:

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. Ok, how we can make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, and create a new Three.js application from scratch.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

=== Prerequisites ===

Suppose you already have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download] - and just run the installer.

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating the Blender scene ===

This one is pretty straightforward, but you must be familiar with the limitations of the glTF 2.0 format, and WebGL in general. Particularly:

* Models must be low-poly to middle-poly so that the entire scene does not exceed several hundreds of thousands polygons. Usually 100k-500k polys is fine.

* Cameras should be assigned explicitly in your app via JavaScript.

* Lights and world shader nodes are not supported. again, you'll need to use JavaScript to setup proper lighting.

* Materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Only limited set of textures is supported, namely Color, Metallic, Roughness, AO, Normal Map, and Emissive.

* Maximum two UV maps are supported. Metallic and Roughness textures should use the same UV map.

* You can adjust the offset, rotation and scale for your textures via a [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can only animate a limited set of params: object position, rotation, scale, the influence value for shape keys, and bone transformations. Again, all animations are initialized and controlled with JavaScript.

=== Exporting the scene to glTF 2.0 ===

The procedure is as follows. First, you open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu. That's it.

=== Adding Three.js builds and dependencies ===

You can download the pre-built version of Three.js from [https://github.com/mrdoob/three.js/ GitHub]. Select the latest release, then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating the main HTML file ===

Create the file '''index.html''' with the following content. For simplicity, it includes everything (HTML, CSS, and JavaScript):

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just edit this file from the template we mentioned earlier.

What is going on in this code snippet? Well...

# Initializing the canvas, scene and camera, as well as WebGL renderer.
# Creating "orbit" camera controls by using the external OrbitControls.js script.
# Loading an HDR map for image-based lighting.
# Finally, loading the glTF 2.0 model we exported previously.

If you merely open this HTML file with the browser you'll see.... nothing! This is a security measure that is imposed by the browsers. Without a properly configured web server you won't be able to launch this web application. So let's run a server!

=== Running a web server ===

As we have Python in Blender, we can just leverage it. Let's create (or just copy the ready-to-use file from the template) a basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then in Blender switch to the '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open that server script, then click the right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server will be running in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. Surely there are some issues with the rendering: namely it does not look exactly as in Blender viewport. There are some things we can do to improve this situation but don't expect much: Three.js is Three.js and Blender is Blender.

=== Building the pipeline ===

Here is a typical approach in creating apps with Three.js and Blender:

# Use template to deploy your apps quickly. Feel free to take our template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting than tweaking multiple light sources with JavaScript.
# Blender first, Three.js second. Basically, try to design as much as possible in Blender to reduce amount of complex graphics coding.
# Take some time to learn glTF 2.0, including its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is a kind of Three.js on steroids. It includes various convenient tools to simplify creating 3D interactive content from Blender scenes. The idea behind it quite simple — 3D web apps should be designed by artists, not coders.

The tool cost some money, however you can use the full-featured trial version as long as you wish. Installation is simple: [https://www.soft8soft.com/get-verge3d download] installer (Windows) or zip archive (macOS, Linux), then follow the installation procedure by enabling the Blender add-on that shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a handy feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

By clicking on this "magic" button you can export and preview your Blender scene right in the web browser:

[[File:v3d_app.jpg|1000px]]

Basically you won't need to create any projects, write any JavaScript logic or launch a web server. It's all done by Verge3D.

If you compare the rendering you get in the browser with Blender viewport you won't see much difference (switch to real-time Eevee renderer to get better results). Verge3D tries to reproduce many Blender features including native node-based materials, lighting, shadows, animation, morphing, etc. Like with vanilla Three.js, it exports to the glTF 2.0 asset and load it in the browser via JavaScript... except you don't need to write any code by yourself.

So how to make your app interactive, if not by JavaScript logic? For that Verge3D comes with visual scripting environment called Puzzles. For example, to convert default Blender cube to nice and spinning Utah teapot you can write the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Behind the scene, these blocks are converted to JavaScript which in turn trigger Verge3D APIs. If you need it, you can write your own JavaScript logic or create your own visual blocks. Also, Verge3D is compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many useful features, including App Manager, AR/VR, WordPress integration, Cordova/Electron builders, physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to the [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach is better? ==

Three.js has one feature that is quite convincing — its free. Basically, if Blender is free, Three.js is free, and your time is free you are just great! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other side, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you better stick to Verge3D. Not only because its more powerful yet compatible with Three.js. Verge3D is designed to be an artist-friendly tool, so it will be very helpful if you already use or going to use Blender in your development pipeline.

Making 3D web apps with Blender and Three.js

2021-11-24T08:29:51Z

Yuri: someedits

It is well known that Blender is the most popular open-source 3D modeling suite. On the other hand, Three.js is the most popular WebGL library. Both have millions of users on their own, yet rarely used in combo for making interactive 3D visualizations that work on the Web. This is because such projects require very different sets of skills to cooperate.

Here we are discussing ways to overcome these difficulties. Ok, how we can make fancy 3D web interactives based on Blender scenes? Basically, you got two options:

# Use the glTF exporter, that comes with Blender, and create a new Three.js application from scratch.
# Use a framework to provide that integration without coding, such as the upgraded version of Three.js called Verge3D.

== Approach 1: glTF + Coding ==

Let's say you have Blender installed. If not, you can get from here — [https://www.blender.org/download/ Blender Download].

With Three.js however, it's not that easy! The official [https://threejs.org/docs/#manual/en/introduction/Installation Three.js Installation] guide recommends using the NPM package manager, as well as the JS module bundling tool called webpack. Also, you're gonna need to run a local web server to test your apps. And the last but not least, you will have to use the command-line interpreter to operate these 3 tools.

This set of tools looks familiar for seasoned web developers. Still, using them to develop with Three.js can be quite non-trivial, especially for people who have limited coding skills (e.g for Blender artists who have some experience in Python scripting).

Another approach is just include the static Three.js build into your project directory, add some external dependencies (such as the glTF 2.0 loader), compose a basic HTML page to link all these, and finally run the Python-based web server to open the app. The latter is simplified due to the fact that Python is already included in Blender.

Check out [https://github.com/Soft8Soft/threejs-blender-template this Three.js-Blender template] to which we bundled everything we mentioned above.

So, let's discuss the next steps to compose and run your first Three.js app.

=== Creating Blender scene ===

This one is pretty straightforward, considering you know limitations of the glTF 2.0 format and 3D web graphics. Among them:

* Make your models low-poly so the complexity of your entire scene does not exceed several hundreds of thousands polygons. 100K-500K polys is good enough.

* Cameras are supported, however you should explicitly assign them in your app via JavaScript.

* Lights and world shaders nodes are not supported. We're going to use JavaScript to setup lighting.

* Your materials should be based on a single '''Principled BSDF''' node. Refer to the [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#materials Blender Manual] for more info.

[[File:suzanne_blender.jpg|1000px]]

* Limited set of textures supported: Color, Metallic, Roughness, AO, Normal Map, Emissive.

* In general, only two UV maps supported. Metallic and Roughness textures should use the same UV map.

* You can assign offset, rotation and scale for your textures via [https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html#uv-mapping single Mapping node]. All other UV modifications are not supported.

* You can animate limited set of params: object position, rotation, scale, influence value for shape keys, and bone transformations. Animations should be assigned and controlled via JavaScript.

=== Exporting scene to glTF 2.0 ===

First, open Blender preferences, click '''Add-ons''', then make sure that '''Import-Export: glTF 2.0 format''' addon is enabled:

[[File:blender_stock_gltf_plugin.jpg|708px]]

After that you can export your scene to glTF via '''File -> Export -> glTF 2.0 (.glb/.gltf)''' menu.

=== Copying Three.js builds and external dependencies ===

You can download pre-built version of Three.js on [https://github.com/mrdoob/three.js/ GitHub]. Select latest release then scroll down to download '''*.zip'''(Windows) or '''tar.gz''' (macOS, Linux) version. In our first app we're going to use the following files from that archive:

* three.module.js — base Three.js module
* GLTFLoader.js — loader for our glTF files.
* OrbitControls.js — to rotate our camera with mouse/touchscreen.
* RGBELoader.js — to load fancy HDRI map used as environment lighting.

=== Creating main HTML file with your app ===

Create file '''index.html''' with the following content. For simplicity we will include HTML, CSS, and JavaScript code there:

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blender-to-Three.js App Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
}
</style>
</head>

<body>
<script type="module">

import * as THREE from './three.module.js';

import { OrbitControls } from './OrbitControls.js';
import { GLTFLoader } from './GLTFLoader.js';
import { RGBELoader } from './RGBELoader.js';

let camera, scene, renderer;

init();
render();

function init() {

const container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.6, 2.7 );

scene = new THREE.Scene();

new RGBELoader()
.load( 'environment.hdr', function ( texture ) {

texture.mapping = THREE.EquirectangularReflectionMapping;

scene.background = texture;
scene.environment = texture;

render();

// model

const loader = new GLTFLoader();
loader.load( 'suzanne.gltf', function ( gltf ) {

scene.add( gltf.scene );

render();

} );

} );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // use if there is no animation loop
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set( 0, 0, - 0.2 );
controls.update();

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

//

function render() {

renderer.render( scene, camera );

}

</script>

</body>
</html>
</syntaxhighlight>

If you want to write any code, just take this file from the template we mentioned earlier.

What we do in this HTML snippet?

# Initializing Three.js: preparing canvas, scene/camera as well as WebGL renderer.
# Creating fancy "orbit" camera controls by using the external OrbitControls.js script.
# Loading HDR map to achieve decent quality of the scene lighting.
# Final step is loading glTF 2.0 model we exported previously.

If you run this HTML file in your file manager you'll get .... nothing! Without a properly configured web server you won't be able to launch this web application. Since this is a security measure that imposed by browsers, there is no easy way to overcome this restriction. So let's write some server!

=== Running web server ===

Let's create (or just copy the ready-to-use file from the template) basic HTTP server script with the following content:

<syntaxhighlight lang="python">
import http.server
import os
import bpy

from threading import Thread, current_thread
from functools import partial

def ServeDirectoryWithHTTP(directory='.'):
hostname = 'localhost'
port = 8000
directory = os.path.abspath(directory)
handler = partial(http.server.SimpleHTTPRequestHandler, directory=directory)
httpd = http.server.HTTPServer((hostname, port), handler, False)
httpd.allow_reuse_address = True

httpd.server_bind()
httpd.server_activate()

def serve_forever(httpd):
with httpd:
httpd.serve_forever()

thread = Thread(target=serve_forever, args=(httpd, ))
thread.setDaemon(True)
thread.start()

app_root = os.path.dirname(bpy.context.space_data.text.filepath)
ServeDirectoryWithHTTP(app_root)
</syntaxhighlight>

Save it under '''server.py''' name, then go to Blender, switch to '''Text Editor''' area:

[[File:blender_open_text_block.jpg|657px]]

Click '''Open''', find and open your server script, then press right arrow icon to launch the HTTP server:

[[File:blender_run_script.jpg|843px]]

The server should run in the background until you close Blender.

=== Running the app ===

Open the following page in your browser [http://localhost:8000/ http://localhost:8000/]. You should see the following page:

[[File:three_app.jpg|1000px]]

Try to rotate or zoom the model. There are some issues with its look, basically it does not look exactly like in Blender viewport. There are some measures how this situation can be improved but don't expect much: Three.js is still Three.js and Blender is still Blender.

=== Organizing pipeline ===

Here is a typical approach in creating apps with Three.js and Blender:

# Use template to deploy your apps quickly. Feel free to take our template - it's free and open-source.
# It's much easier to just load and apply a single HDR-based environment lighting than tweaking multiple light sources with JavaScript.
# Blender first, Three.js second. Basically, try to design as much as possible in Blender to reduce amount of complex graphics coding.
# Take some time to learn glTF 2.0, including its limitations and constraints.

== Approach 2: Verge3D ==

Verge3D is a kind of Three.js on steroids. It includes various convenient tools to simplify creating 3D interactive content from Blender scenes. The idea behind it quite simple — 3D web apps should be designed by artists, not coders.

The tool cost some money, however you can use the full-featured trial version as long as you wish. Installation is simple: [https://www.soft8soft.com/get-verge3d download] installer (Windows) or zip archive (macOS, Linux), then follow the installation procedure by enabling the Blender add-on that shipped with Verge3D:

[[File:blender_verge3d_plugin.jpg|708px]]

Verge3D comes with a handy feature called '''Sneak Peek''':

[[File:blender_sneak_peek.jpg|929px]]

By clicking on this "magic" button you can export and preview your Blender scene right in the web browser:

[[File:v3d_app.jpg|1000px]]

Basically you won't need to create any projects, write any JavaScript logic or launch a web server. It's all done by Verge3D.

If you compare the rendering you get in the browser with Blender viewport you won't see much difference (switch to real-time Eevee renderer to get better results). Verge3D tries to reproduce many Blender features including native node-based materials, lighting, shadows, animation, morphing, etc. Like with vanilla Three.js, it exports to the glTF 2.0 asset and load it in the browser via JavaScript... except you don't need to write any code by yourself.

So how to make your app interactive, if not by JavaScript logic? For that Verge3D comes with visual scripting environment called Puzzles. For example, to convert default Blender cube to nice and spinning Utah teapot you can write the following "code":

[[File:Puzzles_example.jpg|907px]]

This logic is quite self-explanatory. Behind the scene, these blocks are converted to JavaScript which in turn trigger Verge3D APIs. If you need it, you can write your own JavaScript logic or create your own visual blocks. Also, Verge3D is compatible with Three.js, so you can use Three.js snippets, examples, or apps found on the web.

Verge3D comes with many useful features, including App Manager, AR/VR, WordPress integration, Cordova/Electron builders, physics engine, tons of plugins, materials, and asset packs, as well as ready-to-use solutions for e-commerce and e-learning industries. Discussing all these is beyond the scope of this article, so refer to the [https://youtu.be/KIq2Q-DFCT0 beginner-level tutorial series] to learn more about this toolkit.

== Which approach is better? ==

Three.js has one feature that is quite convincing — its free. Basically, if Blender is free, Three.js is free, and your time is free you are just great! You can make something really big, share it, get some recognition, or even sell your work without paying a buck!

On the other side, if [https://www.soft8soft.com/licensing/ paying some money] for a license is not a big deal — you better stick to Verge3D. Not only because its more powerful yet compatible with Three.js. Verge3D is designed to be an artist-friendly tool, so it will be very helpful if you already use or going to use Blender in your development pipeline.

Verge3D for Maya Tutorials

2021-10-13T11:38:42Z

Yuri: /* Official */

[[Category:Tutorials]]
== Official ==

* [https://www.youtube.com/playlist?list=PLMnTV0uuRMhS89ra_kYqKPYbpCv2Eh5GO Verge3D for Maya Basics video course]

* [https://www.youtube.com/watch?v=KVSB3vFmv8M Using Light Probes]

== Community ==

* [https://youtu.be/Os9skozlm6M So you want a cool Maya plugin?] — Verge3D for Maya review by Mike Hermes.

Verge3D for 3ds Max Tutorials

2021-10-13T11:37:52Z

Yuri: /* Official */

[[Category:Tutorials]]
== Official ==

* [https://www.youtube.com/playlist?list=PLMnTV0uuRMhR2zhXxPqAD8G9wp_LNIXZc Verge3D for 3ds Max Basics video course]

* [https://www.youtube.com/watch?v=J3gV2zpvgwo Using Light Probes]

* [https://youtu.be/t4RCYBMn-8I Converting AutoCAD drawing to WebGL-based interactives].

== Community ==

* [https://www.youtube.com/watch?v=U6aGboR_sHE Verge3D with 3ds Max] — creating interactive car visualization in 3ds Max (by Jamie Cardoso).

Verge3D for Blender Tutorials

2021-10-13T11:37:08Z

Yuri: /* Official */

[[Category:Tutorials]]
== Official ==

* [https://www.youtube.com/playlist?list=PLMnTV0uuRMhRH6p4DSW-AEcQZEulzm461 Verge3D for Blender Basics video course]

* [https://www.youtube.com/watch?v=V39heuWD_vo Using Light Probes]

* [https://www.youtube.com/watch?v=VEliwmiEn9s Baking and Using Ambient Occlusion in Verge3D for Blender]

* [[Baking_cloth_simulation_in_Blender_for_exporting_to_Verge3D|Baking cloth simulation in Blender for exporting to Verge3D]]

* [https://www.youtube.com/watch?v=ihu_IR7b6xo Building HTML-Based User Interfaces for 3D Web Apps]

* [https://www.youtube.com/watch?v=nQB6FfC7C7Y Exporting models from FreeCAD to WebGL]

* [https://www.youtube.com/watch?v=Y-VUwoDL0qo Making interactive parametric models with Verge3D, Blender, and WebGL]

* [https://www.youtube.com/watch?v=dJdUKwSxA8c Making 3D Product Configurators for WooCommerce]

* [https://www.youtube.com/watch?v=_0Q2SmxROuk Timelapse - Creating Ring Configurator]

== Community ==

* [https://www.youtube.com/watch?v=U6aGboR_sHE Creating interactive interior visualization] — by Dorian Zgraggen.
* [https://www.youtube.com/playlist?list=PLvH2ejcv0wjRA4K6pQ6mUZgLTueIGSMe2 Creating Asteroids game] — by Dariusz Dzwonkowski.
* [https://youtu.be/ddRRNwBvNk0 Manual animation control, text objects and GIFT] — by CyberFox studio.

Why Verge3D if we have Three.js?

2021-09-10T03:32:36Z

Yuri: minor fixes

{{Personal}}
It's no secret that Verge3D is based on the cool and really popular WebGL framework called [https://threejs.org/ Three.js]. Three.js is open-source, so you can download and use it completely free of charge. So what makes Verge3D worth the money?

== Way better Blender, 3ds Max, or Maya integration ==

Older versions of Three.js included exporters for these modelling suits, but it's not the case anymore. Instead, you should rely on third-party exporters to the glTF 2.0 format and GLTFLoader plugin which should be attached to your application by hand (it's not part of the Three.js core library). Basically, to make something you need to constrain your scene features to fit into glTF 2.0 standard and be a JavaScript coder to be able to render something with Three.js.

With Verge3D it's a completely different story. The framework was designed to be an artist-friendly tool. You just need to have some Blender, 3ds Max, or Maya skills to make any kind of 3D web content with Verge3D. Moreover, it supports features of these modelling suites (cameras, lights, shadows, constraints, animation, etc) natively and strives to make Verge3D renderings look exactly the same.

[[File:blender_3ds_max_maya.png|1060px]]

== Code-Less Programming ==

Three.js requires you to have good programming skills. Since it's quite rare for a person be a good artist and a good coder at the same time, you need at least two specialists to make a non-trivial 3D web application with Three.js. Basically, the artist creates content compatible with glTF 2.0 standard, and then the coder creates an interactive app based on this content.

A typical Verge3D user is an artist. He or she can design content, create an app, and then do "programming" using the visual logic tool called [https://www.soft8soft.com/docs/manual/en/introduction/Puzzles-Visual-Logic-Editor.html Puzzles]. Puzzles is both powerful and easy-to-use.

See it for yourself. The following example makes default Cube clickable and replaces it by a spinning Utah Teapot:

[[File:Puzzles_example.jpg|907px]]

== Beyond glTF 2.0 ==

glTF 2.0 is a great format. The major drawback is lack of many features which are absolutely required to create full-featured 3D web applications. This includes lights, shadows, complex node-based materials, post-processing effects, features to control animation playback, constraints, and many more. Of course, there are dozens of [https://github.com/KhronosGroup/glTF/tree/master/extensions glTF 2.0 extensions] which improve the situation. However, they are required to be supported in the modelling suit exporters and sometimes you need even more JavaScript coding to make them work. But what's even worse, these extensions are made to be modelling-suite independent. So, integration with Blender, 3ds Max, or Maya is not that good.

Verge3D is based on glTF 2.0 standard but it's more than that! Thanks to the custom S8S-prefixed extensions, you can make your assets feature-rich right away. There is no need for third-party extensions and complex JavaScript coding to make your scene look awesome out-of-the-box.

[[File:Scooter.jpg|982px]]

== Enterprise-grade Technical Support ==

Three.js is an open-source project developed by more than a thousand people! Most of them write code in their spare time, and do not get paid for their work. Officially, Three.js does not belong to any company and there are no "customers", only "users". As such, you can't get direct technical support from Three.js developers. You can ask in community groups for help, however there is no guarantee that your issue will be resolved.

Contrary to that, Verge3D is developed by Soft8Soft, the company that offers official technical support for their enterprise-grade customers.

== It's not a by-product of large multinational corporations ==

Earlier we said that Three.js does not belong to any company officially. Still, the lead developer and main contributor to this software is an employee at Google. Same story is with Babylon.js, another popular WebGL toolkit, which is developed by two Microsoft employees. Of course, there are benefits of being under the umbrella of large corporations. Still there are risks, since the both products are non-profitable and do not affect Google/Microsoft income directly. This situation does not allow to say about stable development, since any activity that does not generate enough cash may get cut at any time.

[[File:umbrella.png|Biohazard!|512px]]

On the other hand, Verge3D is Soft8Soft's flagship product, and this small enterprise invests all its resources in development and promotion.

== App Manager ==

Verge3D comes with the App Manager, a tool which offers many important features:

* Creating ready-to-use applications based on templates.
* Running apps, opening models, using Puzzles editor, working with project files from one place.
* Creating Desktop and Mobile apps.
* Updating apps.
* Getting informed when new Verge3D version is out.
* Uploading files to Verge3D Network.

== Verge3D Network ==

Three.js is just a library. It does not include any services to help you make your app available online. With Verge3D Network, an easy-to-use hosting and CDN platform, you can get the job done in seconds. Still, hosting on Verge3D Network is optional, so there is no vendor lock-in and other nasty stuff.

== More ==

There is more. Verge3D comes with:

* Cooler [https://www.soft8soft.com/docs/manual/en/index.html documentation].
* Official [https://www.soft8soft.com/get-verge3d/ tutorial videos] to help you get started.
* Nice [https://www.soft8soft.com/forums forums] and [https://discord.com/invite/vGMAAED Discord channel].
* [[:Category:Plugins|Plugins]]!
* Out-of-the-box asset compression.
* Ready-to-use material libraries.
* Easy integration with HTML builders, such as WebFlow.

... and of course this [[Main Page|Community Wiki]] that everyone can edit!

Main Page

2021-08-03T08:32:16Z

Yuri: /* Getting started */

<strong>Welcome to Verge3D Wiki!</strong>

Here is a community-driven source of information that will help you to become a Verge3D expert!

== Getting started ==

Welcome to Verge3D community wiki that everyone can edit!

== Contents ==

{{Special:AllPages}}

== Contribute ==

Feel free to create a new page by searching for its name or by following the link:

<code><nowiki>https://www.soft8soft.com/wiki/index.php/NEW_ARTICLE_NAME</nowiki></code>