Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Importing Three.js Scene into Blender

Explore how to export 3D scenes from Three.js using the GLTFExporter and import them into Blender. Learn to position cameras and render scenes with Blender’s Cycles engine to integrate web-based 3D models into a professional 3D environment.

We'll cover the following...

Exporting from Three.js and importing into Blender

Let’s get started with our first topic, where we create a scene in Three.js, export it to an intermediate format, and finally import it into Blender.

Example: Export to blender

For this example, we’ll just take a simple sample reusing the parametric geometry. If we execute export-to-blender.js example in the below playground, we can create some parametric geometries. At the bottom of the menu on the right, we’ve added an “exportScene” button:

A simple scene that we’ll export
A simple scene that we’ll export

Click the “Run” button to execute the above example. Once the application is running, please click the provided link to view the output in a new window.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-13': './samples/chapters/chapter-13/export-to-blender.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Export the Three.js scene to use in Blender
...