Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity
✨ ThreeJS + VueJS 3 + ViteJS ⚡
53 Commits 2 Branches 16 Tags 35 MiB
TypeScript 62.2%
JavaScript 31.2%
Vue 6.5%
HTML 0.1%
8a5040e9f6
Go to file
Kevin Levron 8a5040e9f6 add text mesh
2020-09-17 22:37:19 +02:00
build 0.0.6 2020-09-16 23:54:14 +02:00
docs update examples 2020-09-16 23:48:09 +02:00
public wip 2020-09-15 14:59:34 +02:00
screenshots add screenshots 2020-09-17 14:11:29 +02:00
src add text mesh 2020-09-17 22:37:19 +02:00
.eslintrc.js init 2020-09-14 16:57:11 +02:00
.gitignore move github page folder 2020-09-15 10:12:01 +02:00
index.html remove favicon 2020-09-15 10:15:21 +02:00
package.json 0.0.6 2020-09-16 23:54:14 +02:00
README.md add text mesh 2020-09-17 22:37:19 +02:00
rollup.config.js fix rollup forOf 2020-09-17 10:57:13 +02:00

README.md

✨ VueJS 3 + ViteJS + ThreeJS ⚡

I wanted to try to write a lib similar to react-three-fiber but for VueJS.

Demos : https://troisjs.github.io/trois/

I started from scratch... I don't know if I will have time to maintain this, but feel free to participate :)

Trois is a french word, it means Three.

Features

  • Lights
    • AmbientLight
    • PointLight
    • SpotLight
    • ...
  • Materials
    • Basic
    • Phong
    • Lambert
    • Standard
    • Sub Surface Scattering
    • ...
  • Geometries
    • Box
    • Sphere
    • ...
  • Meshes
    • Box
    • Plane
    • Sphere
    • Text
    • InstancedMesh
    • ...
  • Post Processing
    • EffectComposer
    • Renderpass
    • UnrealBloomPass
    • ...
  • Watch props
  • Improve HMR

Installation

yarn add troisjs

PoC

I first made a simple Proof of Concept, take a look at Test1.vue :

<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>

InstancedMesh

Take a look at Test2.vue.

Template

<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>
    <PointLight ref="light" color="#ff6000"></PointLight>
    <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>
    </InstancedMesh>
  </Scene>
</Renderer>

GLTF

Take a look at TestGLTF.vue.

<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
  <AmbientLight></AmbientLight>
</GLTFViewer>

Dev

git clone https://github.com/troisjs/trois
cd trois
yarn
yarn dev