Threejs MMD model loading + contour loading + animation loading + Audio loading + camera animation loading +ammojs loading gltf model loading +gltf reflection adjustment

<script src="./base/ammo.wasm.js"> </script>

import React, {
    Component} from 'react';
import "./home.css"
import * as THREE from "three";
import {
    OrbitControls} from "three/examples/jsm/controls/OrbitControls";
// import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
// load mmd Physical model 
import {
    MMDLoader} from "three/examples/jsm/loaders/MMDLoader";
// introduce   Outer frame line 
import {
    OutlineEffect} from "three/examples/jsm/effects/OutlineEffect";
// Animation 
import {
    MMDAnimationHelper} from "three/examples/jsm/animation/MMDAnimationHelper";
// load   Physical engine 
window.Ammo().then(res=>{
    window.Ammo=res})
const clock=new THREE.Clock()
class Home extends Component {
    
    ready:false
    constructor(args) {
    
        super(args);
        this.state={
    
            width:window.innerWidth,
            height:window.innerHeight,
            count:0
        }
    }
    render() {
    
        return (
            <div className={
    'three-canvas'}>
            </div>
        );
    }
    componentDidMount() {
    
        if(this.state.count===0){
    
            this.init()
            this.state.count++
        }

    }
    getRenderer(){
    
        // Set up 
        const renderer=new THREE.WebGLRenderer()
        renderer.gammaFactor=true
        renderer.setSize(this.state.width,this.state.height)
        document.querySelector('.three-canvas').appendChild(renderer.domElement)
        return renderer
    }
    getCamera(){
    
        const camera=new THREE.PerspectiveCamera(75,this.state.width/this.state.height,1,1000)
        camera.position.z=50
        camera.lookAt(0,0,0)
        return camera
    }
    getScene(){
    
        const scene=new THREE.Scene()
        return scene
    }
    addCube(){
    
       const box= new THREE.Mesh(
            new THREE.BoxGeometry(2,2,2),
            new THREE.MeshNormalMaterial()
        )
        this.scene.add(box)
    }
    getControl(){
    
        const control=new OrbitControls(this.camera,this.renderer.domElement)
        return control
    }
    addSenceBg(){
    
        this.scene.background=new THREE.CubeTextureLoader().setPath('/textures/cube/Bridge2/').load(
            ['posx.jpg',"negx.jpg",
                 'posy.jpg',"negy.jpg",
                 'posz.jpg',"negz.jpg",
            ]
        )
    }
    addToukui(){
    
        // const loader = new GLTFLoader();
        // loader.load('models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',res=>{
    
        // res.scene.traverse(mesh=>{
    
        // if (mesh.isMesh){
    
        // mesh.material.envmap=this.scene.background
        // }
        // })
        // this.scene.add(res.scene)
        // })
        // load Ammd Model of 
       this.helper = new MMDAnimationHelper();
        const loader = new MMDLoader();
        loader.loadWithAnimation(
            // path to PMD/PMX file
            'models/mmd/miku/miku_v2.pmd',
            'models/mmd/vmds/wavefile_v2.vmd',
            // called when the resource is loaded
             ( mmd ) =>{
    

                 this.helper.add( mmd.mesh, {
    
                     animation: mmd.animation,
                     physics: true
                 } );
                 this.scene.add( mmd.mesh );
                 // Load the audio 
                 const audioLoader=new THREE.AudioLoader()
                 audioLoader.load(
                     'models/mmd/audios/wavefile_short.mp3',
                      ( buffer )=> {
    

                             const listener = new THREE.AudioListener();
                             const audio = new THREE.Audio( listener ).setBuffer( buffer );
                             this.helper.add(audio,{
    delayTime:160/30})
                             listener.position.z = 1;
                             this.scene.add( audio );
                             this.scene.add( listener );
                            this.ready=true
                     }

                 );

                 loader.loadAnimation('models/mmd/vmds/wavefile_camera.vmd',
                    this.camera,
                    animations=>{
    
                        this.helper.add(this.camera,{
    
                            animation:animations
                        })
                    }
                 )
            }
        )

    }
    addLight(){
    
        const light = new THREE.AmbientLight( 0xffffff);
        light.position.set( 20, 20, 20 );
        this.scene.add( light );
    }
    init(){
    
        // establish rander -- The camera  --- scene ---- Animation 
        this.renderer=this.getRenderer()
        this.renderer=new OutlineEffect(this.renderer)
        this.camera=this.getCamera()
        this.scene=this.getScene()
        // Add objects 
        // this.addCube()
        // Add helmet 
        this.addToukui()

        // Add lights 
        this.addLight()

        // Add controller 
        this.control=this.getControl()
        // Set the background 
        this.addSenceBg()
        // Perform animation 
        this.animation()
    }
    animation(){
    
        requestAnimationFrame(this.animation.bind(this))
        this.renderer.render(this.scene,this.camera)
        if(this.ready){
    
            this.helper.update( clock.getDelta() );
        }
        this.control.update()
    }
}

export default Home;