1. Project Overview

icegl-three-vue-tres

An Open-Source Framework for Rapid Implementation of 3D Visualization Projects

An open-source framework that helps you quickly bring your 3D visualization projects to life. Permanently open source and free for commercial use.

Digital Twins, 3D Visualization, threejs, webgl, three, three.js

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

4. Feature Overview

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

Developed by icegl. Permanently open source and free for commercial use.

This project integrates three major ecosystems:

ThreeJS * Click for Details

ThreeJS is a renowned JavaScript 3D library that renders 3D graphics in browsers.

Vue3.x * Click for Details

An easy-to-learn and easy-to-use Web front-end framework with excellent performance and a wide range of applications.

TresJS * Click for Details

An npm package that uses Vue3.x components to implement declarative ThreeJS, making it easy to build 3D projects from the front end.

Advantages

Essential Front-End Skills * FesJS

Integrates and encapsulates commonly used libraries for project implementation, including icons, multilingual support, API calls, Vuex/Pinia, model data encapsulation, page layouts and access permissions, route management, and more.

Build 3D Visualization Projects Just Like Writing Vue3.x

Full-featured npm version tracking keeps up with the latest ThreeJS versions. * TresJS provides the latest Vue3.x syntactic sugar, supporting both TS and JS, allowing you to build 3D visualization projects in the most modern 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'
  // Read Material
  const pTexture = await useTexture(['./**.jpg', './**.png'])
  const { onLoop } = useRenderLoop()
  onLoop(({ delta }) => {
    // Render Loop
  })
</script>

Rich Plugin Marketplace
The Plugin Center includes a wide variety of project scenarios and functional extensions. Plugins are an important part of the ICE community ecosystem. Complete applications and standalone plugins in the marketplace are collectively referred to as plugins.

5. Tech Stack

Quick Start

11. Clone the project using git clone or download it directly

22. Navigate to the project root directory using cd

3、yarn  // Install Dependencies

4、yarn pre.dev  // Debug Mode Under Preview

5、yarn dev // Debug Mode Under My Projects

6、yarn pre.build  // Compile and Package Under Preview

7、yarn build  // Compile and Package Under My Projects