move demos

src/App.vue

@@ -8,21 +8,21 @@
 </template>
 
 <script>
-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';
+import Demo1 from './components/demos/Demo1.vue';
+import Demo2 from './components/demos/Demo2.vue';
+import Demo3 from './components/demos/Demo3.vue';
+import Demo4 from './components/demos/Demo4.vue';
+import DemoGLTF from './components/demos/DemoGLTF.vue';
 
 export default {
   name: 'App',
   components: {
-    Test1, Test2, Test3, Test4, TestGLTF,
+    Demo1, Demo2, Demo3, Demo4, DemoGLTF,
   },
   data() {
     return {
-      tests: ['Test1', 'Test2', 'Test3', 'Test4', 'TestGLTF'],
-      test: 'Test1',
+      tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'DemoGLTF'],
+      test: 'Demo1',
     };
   },
 };

src/components/TestGLTF.vue

@@ -1,14 +0,0 @@
-<template>
-  <GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
-    <AmbientLight></AmbientLight>
-  </GLTFViewer>
-</template>
-
-<script>
-import { AmbientLight } from '../index.js';
-import GLTFViewer from './viewers/GLTFViewer.vue';
-
-export default {
-  components: { GLTFViewer, AmbientLight },
-};
-</script>

src/components/demos/Demo1.vue

@@ -20,4 +20,4 @@ export default {
     });
   },
 };
-</script>
+</script>

src/components/demos/Demo5.vue

@@ -0,0 +1,114 @@
+<template>
+  <Renderer
+    ref="renderer"
+    :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
+    mouse-move="body"
+    :mouse-raycast="true"
+    @click="updateColors"
+  >
+    <Camera :fov="50" :position="{ z: 200 }"></Camera>
+    <SubSurfaceMaterial id="material" thicknessColor="#808080" :vertex-colors="true"></SubSurfaceMaterial>
+    <Scene id="scene1" background="#000000">
+      <!-- <AmbientLight color="#111111"></AmbientLight> -->
+      <!-- <PointLight color="#ff0000" :intensity="0.25" :position="{ z: -200 }"></PointLight> -->
+      <PointLight ref="light" color="#FFC0C0" :intensity="1"></PointLight>
+      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
+        <SphereGeometry :radius="5"></SphereGeometry>
+      </InstancedMesh>
+    </Scene>
+    <EffectComposer>
+      <RenderPass></RenderPass>
+      <UnrealBloomPass :strength="0.75"></UnrealBloomPass>
+    </EffectComposer>
+  </Renderer>
+</template>
+
+<script>
+import chroma from 'chroma-js';
+import { Color, MathUtils, InstancedBufferAttribute, Object3D, Vector3 } from 'three';
+
+const {
+  randFloat: rnd,
+  randFloatSpread: rndFS,
+} = MathUtils;
+
+export default {
+  setup() {
+    const NUM_INSTANCES = 2000;
+    const instances = [];
+    const target = new Vector3();
+    const dummy = new Object3D();
+
+    for (let i = 0; i < NUM_INSTANCES; i++) {
+      instances.push({
+        position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
+        scale: rnd(0.2, 1),
+        velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
+        attraction: 0.02 + rnd(-0.01, 0.01),
+        vlimit: 1 + rnd(-0.1, 0.1),
+      });
+    }
+
+    return {
+      NUM_INSTANCES,
+      instances,
+      target,
+      dummy,
+    };
+  },
+  mounted() {
+    this.renderer = this.$refs.renderer;
+    this.imesh = this.$refs.imesh.mesh;
+    this.light = this.$refs.light.light;
+    this.init();
+  },
+  methods: {
+    init() {
+      // init instanced mesh matrix
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        const { position, scale } = this.instances[i];
+        this.dummy.position.copy(position);
+        this.dummy.scale.set(scale, scale, scale);
+        this.dummy.updateMatrix();
+        this.imesh.setMatrixAt(i, this.dummy.matrix);
+      }
+      this.imesh.instanceMatrix.needsUpdate = true;
+
+      // init instances colors
+      this.updateColors();
+
+      // animate
+      this.renderer.onBeforeRender(this.animate);
+    },
+    updateColors() {
+      const cscale = chroma.scale([chroma.random(), chroma.random()]);
+      const colors = [];
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        // const color = new Color(rnd(0, 0xffffff));
+        const color = new Color(cscale(rnd(0, 1)).hex());
+        colors.push(color.r, color.g, color.b);
+      }
+      this.imesh.geometry.setAttribute('color', new InstancedBufferAttribute(new Float32Array(colors), 3));
+    },
+    animate() {
+      this.target.copy(this.renderer.three.mouseV3);
+      this.light.position.copy(this.target);
+
+      const v = new Vector3();
+      for (let i = 0; i < this.NUM_INSTANCES; i++) {
+        const { position, scale, velocity, attraction, vlimit } = this.instances[i];
+
+        v.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
+        velocity.add(v).clampScalar(-vlimit, vlimit);
+        position.add(velocity);
+
+        this.dummy.position.copy(position);
+        this.dummy.scale.set(scale, scale, scale);
+        this.dummy.updateMatrix();
+        this.imesh.setMatrixAt(i, this.dummy.matrix);
+      }
+      this.imesh.instanceMatrix.needsUpdate = true;
+    },
+  },
+};
+</script>

src/components/demos/DemoGLTF.vue

@@ -0,0 +1,9 @@
+<template>
+  <GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
+    <AmbientLight></AmbientLight>
+  </GLTFViewer>
+</template>
+
+<script>
+export default {};
+</script>

src/components/index.js

@@ -0,0 +1 @@
+export { default as GLTFViewer } from './viewers/GLTFViewer.vue';

src/components/viewers/GLTFViewer.vue

@@ -9,11 +9,8 @@
 
 <script>
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { Renderer, Camera, Scene } from '../../index.js';
-import { setFromProp } from '../../tools.js';
 
 export default {
-  components: { Renderer, Camera, Scene },
   props: {
     src: String,
     cameraPosition: Object,
@@ -21,8 +18,6 @@ export default {
   mounted() {
     this.renderer = this.$refs.renderer;
 
-    setFromProp(this.$refs.camera.position, this.cameraPosition);
-
     const loader = new GLTFLoader();
     loader.load(this.src, (gltf) => {
       this.renderer.three.scene.add(gltf.scene);

src/index.js

@@ -5,4 +5,6 @@ export * from './materials/index.js';
 export * from './meshes/index.js';
 export * from './effects/index.js';
 
+export * from './components/index.js';
+
 export * from './tools.js';

src/plugin.js

@@ -37,6 +37,8 @@ export const TroisJSVuePlugin = {
       'EffectComposer',
       'RenderPass',
       'UnrealBloomPass',
+
+      'GLTFViewer',
     ];
 
     comps.forEach(comp => {