/Blender_Threejs_Template

Template for initiating Blender projects intended for use in Three.js

Primary LanguageJavaScript

Blender Three.js Template

This is a template for creating Blender project in Three js. It includes a simple example of a cube with a texture and a video playing on a screen.

Requirements

  • Blender Project (glb/glTF Exporter)
  • Texture Cycle Rendered (make sure uv map is correct)

How Customise Objects

  • Replace roomModel.glb in static/assets with your own model
  • Replace bakedDay.png, bakedNight.png and bakedNeutral.png in static/assets with your own textures that have been baked in Blender

How Customise Screens

  • Replace screen.glb in static/assets with your own model
  • Replace video.mp4 in static/assets with your own video

How to Run

  • Run npm install to install dependencies
  • Run npm run dev to start the development server

Advanced Customisation

Customise Assets

  • Import all your assets into asset.js
  • Make sure the texture is labelled correctly
  • In Baked.js you can change the texture of each object by sequentially adding meshes, texture, material, and add to scene one by one

Customise Screens

  • In World.js you can add more screens by adding more screen objects in setScreens() function, by declare the model and video path

Customise Debug

  • You can create your own debug panel by adding more controls with this syntax
    if (this.debug) {
      this.debugFolder = this.debug.addFolder({
        title: 'Title',},
        expanded: [true/false],
      });
    }
    
  • In debug folder you can add more controls with this syntax
    this.debugFolder.addInput(
      this.object,
      'property',
      { label: 'Label', min: 0, max: 1, step: 0.01 }
    );