2020-09-14 23:04:57 +08:00
|
|
|
# VueJS 3 + ViteJS + ThreeJS
|
|
|
|
|
|
|
|
I wanted to try to write a lib similar to [react-three-fiber](https://github.com/react-spring/react-three-fiber) but for VueJS.
|
|
|
|
|
|
|
|
## PoC
|
|
|
|
|
2020-09-15 17:30:30 +08:00
|
|
|
I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/components/Test1.vue) :
|
2020-09-14 23:04:57 +08:00
|
|
|
|
|
|
|
```html
|
2020-09-14 23:10:01 +08:00
|
|
|
<Renderer>
|
2020-09-14 23:04:57 +08:00
|
|
|
<PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
|
|
|
|
|
2020-09-14 23:06:13 +08:00
|
|
|
<PhongMaterial name="material1" color="#ff0000"></PhongMaterial>
|
|
|
|
<LambertMaterial name="material2" color="#0000ff"></LambertMaterial>
|
2020-09-14 23:04:57 +08:00
|
|
|
|
|
|
|
<Scene>
|
2020-09-14 23:10:01 +08:00
|
|
|
<PointLight :position="{ y: 50, z: 50 }"></PointLight>
|
2020-09-14 23:06:13 +08:00
|
|
|
<Box ref="box" :size="10" material="material1"></Box>
|
|
|
|
<Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere>
|
2020-09-14 23:04:57 +08:00
|
|
|
</Scene>
|
|
|
|
</Renderer>
|
|
|
|
```
|
|
|
|
|
|
|
|
## Test
|
|
|
|
|
|
|
|
git clone https://github.com/troisjs/trois
|
|
|
|
cd trois
|
|
|
|
yarn
|
|
|
|
yarn dev
|