shadow test

src/components/Test1.vue

@@ -1,9 +1,7 @@
 <template>
   <Renderer ref="renderer">
     <Camera :position="{ z: 100 }"></Camera>
-
     <LambertMaterial id="material" color="#0000ff"></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>

src/components/Test2.vue

@@ -1,13 +1,13 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+  <Renderer ref="renderer" :shadow="true" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
     <Camera :position="{ z: 100 }"></Camera>
 
     <PhongMaterial id="material" color="#ff0000"></PhongMaterial>
 
     <Scene id="scene1">
-      <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
-      <InstancedMesh ref="imesh" material="material" :count="1000">
-        <BoxGeometry :size="2"></BoxGeometry>
+      <PointLight :position="{ x: 0, y: 150, z: 150 }" :castShadow="true"></PointLight>
+      <InstancedMesh ref="imesh" material="material" :count="1000" :castShadow="true" :receiveShadow="true">
+        <BoxGeometry :size="5"></BoxGeometry>
       </InstancedMesh>
     </Scene>
   </Renderer>
@@ -39,8 +39,8 @@ export default {
     for (let i = 0; i < 1000; i++) {
       dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
       dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
-      // const scale = rnd(0.2, 1);
-      // dummy.scale.set(scale, scale, scale);
+      const scale = rnd(0.2, 1);
+      dummy.scale.set(scale, scale, scale);
       dummy.updateMatrix();
       imesh.setMatrixAt(i, dummy.matrix);
     }

src/components/Test3.vue

@@ -1,16 +1,12 @@
 <template>
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
     <Camera :position="{ z: 100 }"></Camera>
-
     <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
-
     <Scene id="scene1">
       <!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 20, z: 50 }"></SpotLight> -->
       <!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -20, z: 50 }"></SpotLight> -->
-
       <PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
       <PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight>
-
       <InstancedMesh ref="imesh" material="material" :count="1000">
         <SphereGeometry :radius="2"></SphereGeometry>
       </InstancedMesh>

src/core/Renderer.vue

@@ -17,6 +17,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shadow: {
+      type: Boolean,
+      default: false,
+    },
     orbitCtrl: {
       default: false,
     },
@@ -42,6 +46,7 @@ export default {
     };
 
     if (this.three.init(params)) {
+      this.three.renderer.shadowMap.enabled = this.shadow;
       this.animate();
     };
   },

src/meshes/InstancedMesh.js

@@ -5,6 +5,14 @@ export default {
   props: {
     material: String,
     count: Number,
+    castShadow: {
+      type: Boolean,
+      default: false,
+    },
+    receiveShadow: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     return {
@@ -23,6 +31,8 @@ export default {
   },
   mounted() {
     this.mesh = new InstancedMesh(this.conf.geometry, this.three.materials[this.material], this.count);
+    this.mesh.castShadow = this.castShadow;
+    this.mesh.receiveShadow = this.receiveShadow;
     this.scene.add(this.mesh);
   },
   render() {

src/meshes/Mesh.js

@@ -8,12 +8,22 @@ export default {
     position: Object,
     rotation: Object,
     scale: Object,
+    castShadow: {
+      type: Boolean,
+      default: false,
+    },
+    receiveShadow: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.mesh = new Mesh(this.geometry, this.three.materials[this.material]);
     setFromProp(this.mesh.position, this.position);
     setFromProp(this.mesh.rotation, this.rotation);
     setFromProp(this.mesh.scale, this.scale);
+    this.mesh.castShadow = this.castShadow;
+    this.mesh.receiveShadow = this.receiveShadow;
     this.scene.add(this.mesh);
   },
   render() {