Tech 🖥 : How to make Imish House

Posted: October 21, 2022

Have you ever thought about making an interactive 3d website? Check this out!

Making interactive 3D animation running on your website

Last year, I was trying to make an interactive website using my virtual character called “Imish”.

This is still a buggy website however finally I am just finishing up ver1.0.

And here are the basic steps that I followed to make this website

  1. Making 3D Model
  2. Export the model for javascript
  3. Designing Interactive script

First of all, I referred a lot from the amazing tutorial Three.js Journey and the websites below.

This a good tutorial for making avatar animation and exporting to react.

React spline. you can make your 3d model, they even support deployment for javascript or react etc, and are pretty easy to handle.

Making 3D Model

Obviously, I know I am not good 3d modeling but I start learning blender also this model is based on where I used to live because I would like to make closer my environment as much as possible.

My friends(GADARA) are also helping me to make 3D model and a character in my room.

An image from Notion

3d modeling of my room

An image from Notion

My Virtual Character, sooo adorable. designed by Kazuya YANAGIHARA

An image from Notion

He even tries to export from 3d printer.

After finishing really fundamental models, I started using react-spline

An image from Notion

Original Model

An image from Notion

Exporting react-spline to design materials.

Export the model for javascript

Since react-spline is supporting the export function, you can export as a code like Three.js,React and react-three-fiber.

I exported it as a react-three-fiber for my website.

If you want to make an animation for your character I recommend using mixamo.

Imish animation made by mixiamo

react-three-fiber can only accept the JSX component you need to export your gltf file to import JSX and there is a good library here!

Designing Interactive script

I will not dive into this so much because there are so many ways to make it interactive but as I am a huge fan of tone.js, I used tone.js to respond to my website with music.

I made a kawaii future bass song for this site and each midi sequence is connecting the trigger with some parameter of react-three-fiber.

An image from Notion

My music MIDI

So basic idea is, If you export your model from react-spline you can get code like this.

import useSpline from '@splinetool/r3f-spline'

export default function Scene({ ...props }) {
  const { nodes, materials } = useSpline('***.splinecode')
  return (
      <color attach="background" args={['#667489']} />
      <group {...props} dispose={null} >
          name="ParttLight 2"
          position={[140.29, 270.71, -146.58]}

And I just set the parameter according to the midi note number, for example you can change the color parter depending on what midi number is currently playing.

    if(signal === 'D#2') {
    if(signal === 'C#2') {
    if(signal === 'D2') {

Finally combining those scripts I made this webstie.

There is also some glsl script I tried to include this site for water simulation.

You might get also something from below.

GLSL Experiment

Water Floor