2020-09-15 21:36:39 +08:00
|
|
|
# ✨ VueJS 3 + ViteJS + ThreeJS ⚡
|
2020-09-14 23:04:57 +08:00
|
|
|
|
|
|
|
|
I wanted to try to write a lib similar to [react-three-fiber](https://github.com/react-spring/react-three-fiber) but for VueJS.
|
|
|
|
|
|
2020-09-17 20:19:33 +08:00
|
|
|
<p>
|
|
|
|
|
<img src="/screenshots/troisjs1.jpg" width="40%" />
|
|
|
|
|
<img src="/screenshots/troisjs2.jpg" width="40%" />
|
|
|
|
|
</p>
|
|
|
|
|
|
2020-09-15 21:39:24 +08:00
|
|
|
Demos : https://troisjs.github.io/trois/
|
|
|
|
|
|
2020-09-15 21:36:39 +08:00
|
|
|
I started from scratch... I don't know if I will have time to maintain this, but feel free to participate :)
|
2020-09-15 21:24:47 +08:00
|
|
|
|
2020-09-18 05:11:46 +08:00
|
|
|
I will try to rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.
|
|
|
|
|
|
2020-09-15 21:39:24 +08:00
|
|
|
*Trois* is a french word, it means *Three*.
|
2020-09-15 21:24:47 +08:00
|
|
|
|
2020-09-17 23:10:05 +08:00
|
|
|
## Features
|
|
|
|
|
|
|
|
|
|
- [ ] Lights
|
|
|
|
|
- [x] AmbientLight
|
|
|
|
|
- [x] PointLight
|
|
|
|
|
- [x] SpotLight
|
|
|
|
|
- [ ] ...
|
|
|
|
|
- [ ] Materials
|
|
|
|
|
- [x] Basic
|
|
|
|
|
- [x] Phong
|
|
|
|
|
- [x] Lambert
|
|
|
|
|
- [x] Standard
|
|
|
|
|
- [x] Sub Surface Scattering
|
|
|
|
|
- [ ] ...
|
|
|
|
|
- [ ] Geometries
|
|
|
|
|
- [x] Box
|
|
|
|
|
- [x] Sphere
|
|
|
|
|
- [ ] ...
|
|
|
|
|
- [ ] Meshes
|
|
|
|
|
- [x] Box
|
2020-09-18 04:37:19 +08:00
|
|
|
- [x] Plane
|
2020-09-17 23:10:05 +08:00
|
|
|
- [x] Sphere
|
2020-09-18 04:37:19 +08:00
|
|
|
- [x] Text
|
2020-09-18 03:03:11 +08:00
|
|
|
- [x] InstancedMesh
|
|
|
|
|
- [ ] ...
|
|
|
|
|
- [ ] Post Processing
|
|
|
|
|
- [x] EffectComposer
|
|
|
|
|
- [x] Renderpass
|
|
|
|
|
- [x] UnrealBloomPass
|
2020-09-17 23:10:05 +08:00
|
|
|
- [ ] ...
|
2020-09-18 04:37:19 +08:00
|
|
|
- [ ] Watch props
|
2020-09-18 04:04:18 +08:00
|
|
|
- [ ] Improve HMR
|
2020-09-17 23:10:05 +08:00
|
|
|
|
2020-09-16 21:42:44 +08:00
|
|
|
## Installation
|
|
|
|
|
|
|
|
|
|
yarn add troisjs
|
|
|
|
|
|
2020-09-14 23:04:57 +08:00
|
|
|
## 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-17 03:20:34 +08:00
|
|
|
<Renderer ref="renderer">
|
|
|
|
|
<Camera :position="{ z: 100 }"></Camera>
|
|
|
|
|
<LambertMaterial id="material"></LambertMaterial>
|
|
|
|
|
<Scene>
|
|
|
|
|
<PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
|
|
|
|
|
<Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
|
|
|
|
|
</Scene>
|
|
|
|
|
</Renderer>
|
2020-09-14 23:04:57 +08:00
|
|
|
```
|
|
|
|
|
|
2020-09-15 21:24:47 +08:00
|
|
|
## InstancedMesh
|
|
|
|
|
|
2020-09-17 03:20:34 +08:00
|
|
|
Take a look at [Test2.vue](/src/components/Test2.vue).
|
2020-09-15 21:24:47 +08:00
|
|
|
|
|
|
|
|
### Template
|
|
|
|
|
|
|
|
|
|
```html
|
2020-09-17 03:20:34 +08:00
|
|
|
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
|
|
|
|
|
<Camera :position="{ z: 200 }"></Camera>
|
|
|
|
|
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial>
|
|
|
|
|
<Scene id="scene1" background="#000000">
|
|
|
|
|
<AmbientLight color="#808080"></AmbientLight>
|
2020-09-18 05:11:46 +08:00
|
|
|
<PointLight color="#ff6000"></PointLight>
|
2020-09-17 03:20:34 +08:00
|
|
|
<PointLight ref="light" color="#0060ff" :intensity="0.5" :position="{ z: 200 }"></PointLight>
|
|
|
|
|
<InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES">
|
|
|
|
|
<BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
|
2020-09-15 21:24:47 +08:00
|
|
|
</InstancedMesh>
|
|
|
|
|
</Scene>
|
|
|
|
|
</Renderer>
|
|
|
|
|
```
|
|
|
|
|
|
2020-09-15 22:03:05 +08:00
|
|
|
## GLTF
|
2020-09-15 21:24:47 +08:00
|
|
|
|
|
|
|
|
Take a look at [TestGLTF.vue](/src/components/TestGLTF.vue).
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
|
|
|
|
|
<AmbientLight></AmbientLight>
|
|
|
|
|
</GLTFViewer>
|
|
|
|
|
```
|
|
|
|
|
|
2020-09-17 03:20:34 +08:00
|
|
|
## Dev
|
2020-09-14 23:04:57 +08:00
|
|
|
|
|
|
|
|
git clone https://github.com/troisjs/trois
|
|
|
|
|
cd trois
|
|
|
|
|
yarn
|
|
|
|
|
yarn dev
|
