three-base

.创建一个 homeRender.ts 模块
import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from "three";
import ThreeBase from "three-base";
import Transition from "three-base/Transition";
import Fire from "three-base/Fire";

//qq389652405
class HomeRender extends ThreeBase {

    constructor() {
        super();
    }

    // 环境光
    ambientLight = (() => {
        const ambientLight = new AmbientLight("#fff", 0.4);
        this.scene.add(ambientLight);
        return ambientLight;
    })();

    //点光源
    pointLight = (() => {
        const pointLight = new PointLight("#fff", 0.4);
        pointLight.position.set(50, 40, 50);
        this.scene.add(pointLight);
        return pointLight;
    })();

    init() {
        super.init();
	// 使用这个方法来初始化相机的位置和朝向
        this.resetLookAt({
            center: new Vector3(0, 0, 0),
            position: new Vector3(10.954, 19.452, 39.811)
        });

    }

    //火焰
    fire = (() => {
        const fire = new Fire();
        fire.fireColor = "#ff2200";// 火焰的颜色
        fire.fireScale = 1;// 火焰的整体缩放值
        fire.fireRadius = 0.5;// 火焰的燃烧半径
        fire.fireHeight = 3;// 火焰的高度
        fire.position.set(0, 5, 0);
        this.scene.add(fire);
        return fire;
    })();

    box = (() => {
        const geometry = new BoxGeometry(10, 10, 10);
        const matearil = new MeshLambertMaterial({ color: 0xfff });
        const mesh = new Mesh(geometry, matearil);

	//创建一个动画对象
        const transition = new Transition({ rotationY: 0 });

        // 动画对象播放回调
        transition.onChange(({ rotationY }) => {
            mesh.rotation.y = rotationY;
        });

        mesh.position.set(0, 0, 0);
        mesh.userData = { cursor: "pointer", enableEvent: true };

        // 提供了常用的鼠标事件
        mesh.addEventListener("click", e => { });
        mesh.addEventListener("dbclick", e => { });

        mesh.addEventListener("leftclick", e => {
            transition.set({ rotationY: Math.random() * 5 });
        });
        mesh.addEventListener("rightclick", e => { });
        mesh.addEventListener("mouseenter", e => { });
        mesh.addEventListener("mouseleave", e => { });
        mesh.addEventListener("mousemove", e => { });
        mesh.addEventListener("mousedown", e => { });
        mesh.addEventListener("mouseup", e => { });

        this.scene.add(mesh);
        return mesh;
    })();

}


const homeRenderer = new HomeRender();

// 导出这个单例对象
export default homeRenderer;



2.添加到div里面
import homeRenderer form "./homeRenderer.ts";
homeRenderer.setContainer( document.getElementById("div") );

请尽量使用 vite 来打包

代码: https://gitee.com/drm/vite_react_mobx_threebase