TroisJS

Installation

CDN

You don't need to install TroisJS to play with it, please read how to use TroisJS via CDN.

New project

Download :

Unzip it, and :

cd troisjs (or troisjs-ts)
npm install
npm run dev

Or :

cd troisjs (or troisjs-ts)
yarn
yarn dev

Existing VueJS 3 project

npm install three@0.127 troisjs

Or yarn add three@0.127 troisjs

Vue plugin

import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);

WARNING

Don't use the plugin if you need tree shaking and typescript support.

Example

<template>
  <Renderer ref="renderer">
    <Camera :position="{ z: 10 }" />
    <Scene>
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box ref="box" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
export default {
  mounted() {
    const renderer = this.$refs.renderer;
    const box = this.$refs.box.mesh;
    renderer.onBeforeRender(() => {
      box.rotation.x += 0.01;
    });
  },
};
</script>

Example without plugin

<template>
  <Renderer>
    <Camera :position="{ z: 10 }" />
    <Scene>
      <PointLight :position="{ y: 50, z: 50 }" />
      <Box>
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
import { Box, Camera, LambertMaterial, PointLight, Renderer, Scene } from 'troisjs';
export default {
  components: { Box, Camera, LambertMaterial, PointLight, Renderer, Scene },
};
</script>

Typescript

TroisJS v0.3 has been rewritten using Typescript, if you want to have a good support :