Welcome to three-auto 👋

three-auto can quickly generate a Three.js scene through default configuration settings, without requiring users to manually declare basic classes like camera and renderer.

✨ Demo | 📖 Documents

Install

npm install three-auto

yarn add three-auto

Using

Creating an auto-three instance, you need a canvas DOM root node or a virtual DOM node (supported by frameworks like Vue and React) to render the Three.js scene.

html

 <canvas class="webgl" id="_scene"></canvas>
 <script type="module" src="./src/main.ts"></script>

js/ts

import * as AUTO from "three-auto";
import * as THREE from "three";
const canvas = document.getElementById('_scene') as HTMLCanvasElement;
const instance = new AUTO.ThreeAuto(canvas);
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshBasicMaterial({
  color: "#E89ABE",
  transparent: true,
});
const box = new THREE.Mesh(geometry, material);
instance.scene.add(box);
instance.time.on("tick", () => {
  box.rotation.y = instance.time.elapsedTime;
});

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Thank you to all the people who already contributed to three-auto!

Michela

More

coderhyh

Show your support

Give a ⭐️ if this project helped you!

Features

• support axis helpers ✅
• support physic
• add edit packages (like gui) ✅
• add more chart types(Curve ✅\Bar ✅\Pie ✅\map ✅)
• support environment ✅
• support lenged ✅
• optimize picture sizes ✅
• support customer compose renderer pass ✅
• support animationMixer ✅ （Skeleton） ✅
• support CSS2DRenderer ✅ and CSS3DRenderer ✅
• support tooltip andd tips ✅
• support shadow ✅
• preferences Raycaster ✅
• add documentation packages ✅

---

This README was generated with ❤️ by readme-md-generator