# three-base

> three 3d three-base

Latest version **2.0.137** (published 2026-06-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install three-base
pnpm add three-base
yarn add three-base
bun add three-base
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.137 |
| Published | 2026-06-14 |
| First published | 2022-06-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | qq389652405 |
| Keywords | three, 3d, three-base |

## Links

- npm: https://www.npmjs.com/package/three-base
- Repository: https://gitee.com/drm/three-base
- npm.io page: https://npm.io/package/three-base

## Dependencies (10)

- [vite](https://npm.io/package/vite.md) *
- [dexie](https://npm.io/package/dexie.md) ^3
- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [three](https://npm.io/package/three.md) 0.167.0
- [lodash](https://npm.io/package/lodash.md) ^4
- [apng-js](https://npm.io/package/apng-js.md) ^1
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [@types/three](https://npm.io/package/@types/three.md) 0.167.0
- [@zumer/snapdom](https://npm.io/package/@zumer/snapdom.md) ^1.9.14
- [three-mesh-bvh](https://npm.io/package/three-mesh-bvh.md) ^0.8.3

## Recent versions

- 2.0.137 (latest) — 2026-06-14
- 2.0.134 — 2026-06-09
- 2.0.130 — 2025-10-08
- 2.0.129 — 2025-05-29
- 2.0.128 — 2025-03-10
- 2.0.127 — 2025-03-10
- 2.0.126 — 2025-02-10
- 2.0.125 — 2025-02-06
- 2.0.124 — 2025-02-06
- 2.0.123 — 2025-02-04
- 2.0.122 — 2025-02-03
- 2.0.121 — 2025-02-03
- 2.0.120 — 2025-02-03
- 2.0.119 — 2025-02-03
- 2.0.118 — 2025-01-20
- … 212 more at https://npm.io/package/three-base/versions

## README

```tsx

.创建一个 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

---
_Source: https://npm.io/package/three-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._