# trois-fresh

> # ✨ ThreeJS + VueJS 3 + ViteJS ⚡ 首先感谢 https://github.com/troisjs/trois 更新了依赖的一些库，包括threeJS:0.156.1、simp

Latest version **0.4.0** (published 2023-09-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install trois-fresh
pnpm add trois-fresh
yarn add trois-fresh
bun add trois-fresh
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2023-09-19 |
| First published | 2023-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hawk |
| Maintainers | hawk86104 |
| Keywords | threejs, vuejs, webgl, vitejs |

## Links

- npm: https://www.npmjs.com/package/trois-fresh
- Repository: https://gitee.com/hawk86104/trois-fresh
- Issues: https://gitee.com/hawk86104/trois-fresh/issues
- npm.io page: https://npm.io/package/trois-fresh

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2023-09-19
- 0.3.9 — 2023-09-19
- 0.3.8 — 2023-09-19

## README

<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: Hawk
 * @Date: 2023-09-19 09:33:22
 * @LastEditors: Hawk
 * @LastEditTime: 2023-09-19 11:53:47
-->
# ✨ ThreeJS + VueJS 3 + ViteJS ⚡
首先感谢 https://github.com/troisjs/trois
更新了依赖的一些库，包括threeJS:0.156.1、simplex-noise:4.0.1等 
因为演示：troisjs.github.io 代码编译也有些问题

也增加了演示版: http://icegl.cn:9000

处于原版npm库已经不更新,故修改了名称

[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]

[npm]: https://img.shields.io/npm/v/trois-fresh
[npm-url]: https://www.npmjs.com/package/trois-fresh
[build-size]: https://badgen.net/bundlephobia/minzip/trois-fresh
[build-size-url]: https://bundlephobia.com/result?p=trois-fresh
[npm-downloads]: https://img.shields.io/npm/dw/trois-fresh
[npmtrends-url]: https://www.npmtrends.com/trois-fresh

<p style="text-align:center;">
	点击图片查看演示
 	<a href="http://icegl.cn:9000"><img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230912/demo.png" width="100%" /></a>
</p>

- 💻 Examples (wip) : https://troisjs.github.io/ ([sources](https://github.com/troisjs/troisjs.github.io/tree/master/src/components))
- 📖 Doc (wip) : https://troisjs.github.io/guide/ ([repo](https://github.com/troisjs/troisjs.github.io))
- 🚀 Codepen examples : https://codepen.io/collection/AxoWoz

I wanted to code something similar to *react-three-fiber* but for VueJS.

I started from scratch, I will rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.

**Feel free to contact me if you need a ThreeJS developer ^^**

*Trois* is a french word, it means *Three*.

## Usage (CDN)

TroisJS is really simple and easy to use :

```html
<div id="app">
  <renderer ref="renderer" antialias orbit-ctrl resize="window">
    <camera :position="{ z: 10 }"></camera>
    <scene>
      <point-light :position="{ y: 50, z: 50 }"></point-light>
      <box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <lambert-material></lambert-material>
      </box>
    </scene>
  </renderer>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/troisjs@0.3.2/build/trois-fresh.module.cdn.min.js';
  createApp({
    mounted() {
      const renderer = this.$refs.renderer;
      const box = this.$refs.box.mesh;
      renderer.onBeforeRender(() => {
        box.rotation.x += 0.01;
      });
    }
  }).mount('#app');
</script>
```

Read more on https://troisjs.github.io/guide/

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