demos and readme

README.md

@@ -74,9 +74,13 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
   - [ ] ...
 - [ ] Post Processing
   - [x] EffectComposer
-  - [x] Renderpass
-  - [x] UnrealBloomPass
-  - [ ] ...
+    - [x] BokehPass
+    - [x] FilmPass
+    - [x] HalftonePass
+    - [x] Renderpass
+    - [x] UnrealBloomPass
+    - [ ] ...
+- [ ] ...
 
 ## Installation
 

src/components/demos/Demo1.vue

@@ -1,10 +1,10 @@
 <template>
   <Renderer ref="renderer">
-    <Camera :position="{ z: 10 }"></Camera>
-    <LambertMaterial id="material"></LambertMaterial>
+    <Camera :position="{ z: 10 }" />
+    <LambertMaterial id="material" />
     <Scene>
-      <PointLight :position="{ y: 50, z: 50 }"></PointLight>
-      <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material"></Box>
+      <PointLight :position="{ y: 50, z: 50 }" />
+      <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" />
     </Scene>
   </Renderer>
 </template>
@@ -14,10 +14,9 @@ export default {
   mounted() {
     const renderer = this.$refs.renderer;
     const box = this.$refs.box.mesh;
-
     renderer.onBeforeRender(() => {
       box.rotation.x += 0.01;
     });
   },
 };
-</script>
+</script>

src/components/demos/Demo2.vue

@@ -1,18 +1,30 @@
 <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>
+  <Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
+    <Camera :position="{ z: 200 }" />
+    <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
+    <PhongMaterial id="material1" />
     <Scene>
-      <AmbientLight color="#808080"></AmbientLight>
-      <PointLight color="#ff6000"></PointLight>
-      <PointLight ref="light" color="#0060ff" :intensity="0.5"></PointLight>
+      <AmbientLight color="#808080" />
+      <PointLight color="#ff6000" />
+      <PointLight ref="light" color="#0060ff" :intensity="0.5" />
       <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
-        <BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
+        <BoxGeometry :width="2" :height="2" :depth="10" />
       </InstancedMesh>
+      <Text
+        text="TroisJS"
+        font-src="helvetiker_regular.typeface.json"
+        material-id="material1"
+        align="center"
+        :size="30"
+        :height="5"
+        :position="{ x: 0, y: 0, z: 0 }"
+        :cast-shadow="true"
+      />
     </Scene>
     <EffectComposer>
-      <RenderPass></RenderPass>
-      <UnrealBloomPass :strength="1"></UnrealBloomPass>
+      <RenderPass />
+      <UnrealBloomPass :strength="1" />
+      <HalftonePass :radius="1" :scatter="0" />
     </EffectComposer>
   </Renderer>
 </template>

src/components/demos/Demo3.vue

@@ -1,17 +1,17 @@
 <template>
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
-    <Camera :position="{ z: 100 }"></Camera>
-    <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
+    <Camera :position="{ z: 100 }" />
+    <PhongMaterial id="material" color="#ffffff" />
     <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>
+      <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
+      <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
       <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
-        <SphereGeometry :radius="5"></SphereGeometry>
+        <SphereGeometry :radius="5" />
       </InstancedMesh>
     </Scene>
     <EffectComposer>
-      <RenderPass></RenderPass>
-      <UnrealBloomPass :strength="1"></UnrealBloomPass>
+      <RenderPass />
+      <UnrealBloomPass :strength="2" />
     </EffectComposer>
   </Renderer>
 </template>
@@ -22,7 +22,7 @@ import { Object3D, MathUtils } from 'three';
 export default {
   setup() {
     return {
-      NUM_INSTANCES: 500,
+      NUM_INSTANCES: 2000,
     };
   },
   mounted() {
@@ -31,7 +31,7 @@ export default {
     const dummy = new Object3D();
     const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
     for (let i = 0; i < this.NUM_INSTANCES; i++) {
-      dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
+      dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
       const scale = rnd(0.2, 1);
       dummy.scale.set(scale, scale, scale);
       dummy.updateMatrix();

src/components/demos/Demo4.vue

@@ -1,7 +1,7 @@
 <template>
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
-    <Camera :position="{ z: 250 }"></Camera>
-    <BasicMaterial id="material"></BasicMaterial>
+    <Camera :position="{ z: 250 }" />
+    <BasicMaterial id="material" />
     <Scene>
       <Text
         ref="text"