update examples

src/App.vue

@@ -11,17 +11,18 @@
 import Test1 from './components/Test1.vue';
 import Test2 from './components/Test2.vue';
 import Test3 from './components/Test3.vue';
+import Test4 from './components/Test4.vue';
 import TestGLTF from './components/TestGLTF.vue';
 
 export default {
   name: 'App',
   components: {
-    Test1, Test2, Test3, TestGLTF,
+    Test1, Test2, Test3, Test4, TestGLTF,
   },
   data() {
     return {
-      tests: ['Test1', 'Test2', 'Test3', 'TestGLTF'],
+      tests: ['Test1', 'Test2', 'Test3', 'Test4', 'TestGLTF'],
-      test: 'Test2',
+      test: 'Test1',
     };
   },
 };

src/components/Test1.vue

@@ -3,27 +3,14 @@
     <Camera :position="{ z: 100 }"></Camera>
     <LambertMaterial id="material"></LambertMaterial>
     <Scene>
-      <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
+      <PointLight :position="{ y: 50, z: 50 }"></PointLight>
       <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
     </Scene>
   </Renderer>
 </template>
 
 <script>
-import {
-  Renderer, Camera, Scene,
-  LambertMaterial,
-  PointLight,
-  Box,
-} from '../index.js';
-
 export default {
-  components: {
-    Renderer, Camera, Scene,
-    LambertMaterial,
-    PointLight,
-    Box,
-  },
   mounted() {
     const renderer = this.$refs.renderer;
     const box = this.$refs.box.mesh;

src/components/Test2.vue

@@ -2,7 +2,7 @@
   <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">
+    <Scene>
       <AmbientLight color="#808080"></AmbientLight>
       <PointLight color="#ff6000"></PointLight>
       <PointLight ref="light" color="#0060ff" :intensity="0.5"></PointLight>
@@ -20,23 +20,12 @@
 <script>
 import { Object3D, MathUtils, Vector3 } from 'three';
 
-import {
-  Renderer, Camera, Scene, AmbientLight, PointLight,
-  StandardMaterial, InstancedMesh, BoxGeometry,
-  EffectComposer, RenderPass, UnrealBloomPass,
-} from '../index.js';
-
 const {
   randFloat: rnd,
   randFloatSpread: rndFS,
 } = MathUtils;
 
 export default {
-  components: {
-    Renderer, Camera, Scene, AmbientLight, PointLight,
-    StandardMaterial, InstancedMesh, BoxGeometry,
-    EffectComposer, RenderPass, UnrealBloomPass,
-  },
   setup() {
     const NUM_INSTANCES = 2000;
     const instances = [];

src/components/Test3.vue

@@ -2,7 +2,7 @@
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
     <Camera :position="{ z: 100 }"></Camera>
     <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
-    <Scene id="scene1" background="#000000">
+    <Scene>
       <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></SpotLight>
       <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></SpotLight>
       <InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
@@ -19,18 +19,7 @@
 <script>
 import { Object3D, MathUtils } from 'three';
 
-import {
-  Renderer, Camera, Scene, SpotLight,
-  PhongMaterial, InstancedMesh, SphereGeometry,
-  EffectComposer, RenderPass, UnrealBloomPass,
-} from '../index.js';
-
 export default {
-  components: {
-    Renderer, Camera, Scene, SpotLight,
-    PhongMaterial, InstancedMesh, SphereGeometry,
-    EffectComposer, RenderPass, UnrealBloomPass,
-  },
   setup() {
     return {
       NUM_INSTANCES: 500,

src/components/Test4.vue

@@ -0,0 +1,18 @@
+<template>
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+    <Camera :position="{ z: 200 }"></Camera>
+    <BasicMaterial id="material"></BasicMaterial>
+    <Scene>
+      <Text
+        text="TEST"
+        font-src="helvetiker_regular.typeface.json"
+        material="material"
+        align="center"
+      ></Text>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+export default {};
+</script>

src/main.js

@@ -1,6 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import TroisJSPlugin from './plugin.js';
 import './index.css';
 
 const app = createApp(App);
+app.use(TroisJSPlugin);
 app.mount('#app');