TvT.js

| English

An open-source framework for rapid implementation of 3D visualization projects.

Ecosystem: `@ThreeJS @Vue3.x @TresJS`

Developed by icegl, permanently open-source and free for commercial use, with ongoing updates. Please click the star in the upper right corner to follow.

This project integrates into three major ecosystems:

ThreeJS * Click for details A renowned 3D library based on browser rendering using JavaScript.
Vue3.x * Click for details A web frontend framework that is easy to learn and use, performs excellently, and supports a wide range of scenarios.
TresJS * Click for details An npm package that enables declarative ThreeJS using Vue3.x components, designed for building 3D projects in frontend development.

Click to preview opensource.icegl.cn

If access is too slow, try Mirror Site 1 oss.icegl.cn
If access is too slow, try Mirror Site 2 myhome.217dan.com:8899
github Mirror Site https://hawk86104.github.io

Since the project is frequently updated and compiled, if you encounter access errors, please clear your browser cache.

Advantages

Frontend Fundamentals FesJS Click for details

Build 3D Visualization Projects Like Writing Vue3.x Click for details

npm The npm full-featured version keeps up with the latest ThreeJS version. TresJS adopts the latest Vue3.x syntactic sugar and supports both TS/JS, allowing you to build 3D visualization projects in the most efficient and enjoyable way.

<template>
    <TresCanvas window-size>
        <TresPerspectiveCamera />
        <TresMesh>
            <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
            <TresMeshBasicMaterial color="orange" />
        </TresMesh>
    </TresCanvas>
</template>

<script setup lang="ts">
import { useRenderLoop, useTexture } from '@tresjs/core'

const pTexture = await useTexture(['./**.jpg', './**.png'])
const { onLoop } = useRenderLoop()
onLoop(({ delta }) => {

})
</script>

Quick Start

1git clone the repository or download this project directly.

2Navigate to the project root directory with cd

3yarn	//  Install dependencies.

4yarn pre.dev // Debug mode for preview.

5yarn dev // Debug mode for your own project.

6yarn pre.build   // Compile and bundle for preview.

7yarn build   // Compile and bundle for your own project.

8yarn both    // Start both dev and pre.dev simultaneously, allowing you to debug your own project while referencing and porting examples and plugins.

Documentation

User Guidedocs.icegl.cn

Issue Reporting

If you encounter any problems while using the project, please contact us through the following channels:

Q&A Community: Graphics Community icegl.cn

We also welcome you to join our WeChat groups. Several groups are already full, so feel free to add me on WeChat, and Ill invite you to join for learning and discussing WebGL together.

Star History

Copyright Information

This project is released under the Apache 2.0 open-source license, providing free lifetime use and allowing commercial applications.

If you use this project for commercial purposes, please comply with the Apache 2.0 license and retain the authors technical support acknowledgment.

For secondary development intended for commercial use or open-source competitors, please do not remove or modify the copyright, author statement, or source attribution at the top of the TvT.js source code.
Commercial use is allowed, but secondary open-sourcing and charging for it are prohibited.

The copyright information of third-party source code and binary files included in this project will be noted separately.

Follow our official WeChat account to receive the latest updates.

Badges

Extracted from project README