Learn Three.js for 3D Computer Graphics/

...

/

Importing Three.js Scene into Blender

Importing Three.js Scene into Blender

Learn how to export Three.js scene and use it in Blender.

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:

Press + to interact
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
...