Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-23 20:02:32 +08:00
Code Issues Projects Releases Wiki Activity

0.3.0

Browse Source
This commit is contained in:
Kevin Levron 2021-05-11 21:34:35 +02:00
parent 116733b68a
commit d7fd23f4f7
4 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -2,13 +2,13 @@
[![NPM Package][npm]][npm-url] [![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url] [![Build Size][build-size]][build-size-url]
[![NPM Downloads][npm-downloads]][npmtrends-url] [![NPM Downloads][npm-downloads]][npmtrends-url]
[![Support][support]][support-url] <!-- [![Support][support]][support-url] -->
<!-- [![Discord][discord]][discord-url] --> [![Discord][discord]][discord-url]
[npm]: https://img.shields.io/npm/v/troisjs [npm]: https://img.shields.io/npm/v/troisjs
[npm-url]: https://www.npmjs.com/package/troisjs [npm-url]: https://www.npmjs.com/package/troisjs
[build-size]: https://badgen.net/bundlephobia/minzip/troisjs@0.1.19 [build-size]: https://badgen.net/bundlephobia/minzip/troisjs
[build-size-url]: https://bundlephobia.com/result?p=troisjs@0.1.19 [build-size-url]: https://bundlephobia.com/result?p=troisjs
[npm-downloads]: https://img.shields.io/npm/dw/troisjs [npm-downloads]: https://img.shields.io/npm/dw/troisjs
[npmtrends-url]: https://www.npmtrends.com/troisjs [npmtrends-url]: https://www.npmtrends.com/troisjs
[discord]: https://img.shields.io/discord/828384755778846772 [discord]: https://img.shields.io/discord/828384755778846772
@ -39,8 +39,6 @@ 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. 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.
Next version (*v0.3*, rewrited with Typescript) will be soon released !
*Trois* is a french word, it means *Three*. *Trois* is a french word, it means *Three*.
## Usage (CDN) ## Usage (CDN)

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "troisjs", "name": "troisjs",
"version": "0.3.0-beta.5", "version": "0.3.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"types": "tsc", "types": "tsc",

8
src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Renderer ref="renderer" antialias :pointer="{ resetOnEnd: true }" :orbit-ctrl="{ enableDamping: true }" resize="window"> <Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize="window">
<Camera :position="{ z: 10 }" /> <Camera :position="{ z: 10 }" />
<Scene> <Scene>
<PointLight :position="{ y: 50, z: 50 }" /> <PointLight :position="{ y: 50, z: 50 }" />
@ -18,10 +18,10 @@ export default defineComponent({
components: { Box, Camera, LambertMaterial, PointLight, Renderer, Scene }, components: { Box, Camera, LambertMaterial, PointLight, Renderer, Scene },
mounted() { mounted() {
const renderer = this.$refs.renderer as RendererPublicInterface const renderer = this.$refs.renderer as RendererPublicInterface
const mesh = (this.$refs.box as MeshPublicInterface).mesh const box = this.$refs.box as MeshPublicInterface
if (renderer && mesh) { if (renderer && box) {
renderer.onBeforeRender(() => { renderer.onBeforeRender(() => {
mesh.rotation.x += 0.01 box.mesh.rotation.x += 0.01
}) })
} }
}, },

2
tsconfig.json
View File

@ -16,7 +16,5 @@
"outDir": "types", "outDir": "types",
}, },
"include": ["src/**/*.ts", "src/**/*.vue"], "include": ["src/**/*.ts", "src/**/*.vue"],
"exclude": ["src/components/**/*.ts"],
// "include": ["src/export.ts"], // "include": ["src/export.ts"],
// "exclude": ["src/App.vue", "src/main.ts"],
} }