XM V2 Note 1

Posted on Edited on

Don't tell anyone
Since the last time I yarned a full English blog, it has been a long while, like a century. I should note down what I am doing on my website, it used to be a portfolio only. But the longer I put effort into it, the more spectacularly I am expecting it should be. It seems that the site will never end.

Solid JS

Another framework I just learned, took me approx 1 week, I heard that it was born to fix React’s problem. From my POV, it does solve the state problem, more slim, and carefree.

Blender animation to threejs

1 Create any animation in Blender.
2 In Action Editor, name it, and push it down(I still don’t know WTF does this “push down” means.)
3 Export GLTF, with animation setting like this:
Animation Export Setting
4 In ThreeJS, load the .glb file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const dracoLoader = new DRACOLoader() // Blender exported glb file need DRACO Decoder to decode it
dracoLoader.setDecoderConfig({ type: 'js' })
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/')
const loader = new GLTFLoader()
loader.setDRACOLoader(dracoLoader)
loader.load(
    `modelFilePath`,
    (gltf) => {
        //Turn on shadow casting
        gltf.scene.traverse(function (child) {
            if ((child as THREE.Mesh).isMesh) {
            const m = child as THREE.Mesh
            m.receiveShadow = receiveShadow || false
            m.castShadow = receiveShadow || false
            }
        })
        scene.add(gltf.scene)
    },
    () => {},
    (err) => {
        console.error(err)
    },
)

5 Set up the animation mixer, with the GLTF obj you got from step 4.

1
2
3
4
5
6
7
8
9
const mixer = new AnimationMixer(gltf.scene)
const animations = gltf.animations
const animationMap = new Map()
animations
.forEach((animation) => {
    //map animation and name.
    animationMap.set(animation.name, mixer.clipAction(animation))
})
animationMap.get('goose-idle')?.play()

Fix DirectionalLight Stripe/Shadow Rect

The original DirectionalLight in Threejs has something wrong with the GLTF model(Sometimes).

You can fix this by applying some light tricks:

1
2
3
4
5
6
7
8
9
10
11
12
13
const light = new DirectionalLight(0xffffff, 3)
scene.add(light)
light.castShadow = true
const d = 30
light.position.set(d, d, -d / 2)

light.shadow.bias = -0.0005
light.shadow.camera.left = -d
light.shadow.camera.right = d
light.shadow.camera.top = d
light.shadow.camera.bottom = -d
light.shadow.camera.near = 0.5
light.shadow.camera.far = 1000