chore: update example

src/app.ts

@@ -1,8 +1,15 @@
-import { PerspectiveCamera, Scene, WebGLRenderer, Fog, Color } from 'three'
+import {
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+  Fog,
+  Color,
+  DirectionalLight
+} from 'three'
 import Example from '@/models/example'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import ProxyElement from './utils/ProxyElement'
-
+import { genParticle } from '@/models/particle'
 export default class App {
   /**
    * Render config
@@ -120,9 +127,18 @@ export default class App {
     this.camera.position.z = 5
     this.scene.fog = new Fog(0x444466, 100, 400)
     this.scene.background = new Color(0x444466)
+    const light = new DirectionalLight(0xffffff, 1)
+    light.position.set(1, 1, 1).normalize()
+
+    /**
+     * Example Application
+     */
     this.example.position.x = 0
     this.example.position.y = 0
     this.scene.add(this.example)
+    this.scene.add(light)
+    genParticle(this.scene)
+
     /**
      * EventHandler
      */

src/models/example.ts

@@ -1,4 +1,9 @@
-import { Mesh, MeshBasicMaterial, BoxBufferGeometry } from 'three'
+import {
+  Mesh,
+  MeshBasicMaterial,
+  BoxBufferGeometry,
+  MeshLambertMaterial
+} from 'three'
 
 const colorMaterial = [0x00ff00, 0xff0000, 0xff0000, 0x00ffff]
 
@@ -11,7 +16,7 @@ export default class Example extends Mesh {
   constructor() {
     super(
       new BoxBufferGeometry(1, 1, 1),
-      new MeshBasicMaterial({ color: getColor() })
+      new MeshLambertMaterial({ color: getColor() })
     )
     this.animate = this.animate.bind(this)
     this.changeRotateRandom = this.changeRotateRandom.bind(this)
@@ -21,7 +26,7 @@ export default class Example extends Mesh {
     this.rotateAnimationX = (Math.random() - 0.5) * 2
     this.rotateAnimationY = (Math.random() - 0.5) * 2
     this.rotateAnimationZ = (Math.random() - 0.5) * 2
-    this.material = new MeshBasicMaterial({ color: getColor() })
+    this.material = new MeshLambertMaterial({ color: getColor() })
   }
   public animate() {
     this.rotation.x += this.rotateAnimationX

src/models/particle.ts

@@ -0,0 +1,26 @@
+import { Scene, BoxBufferGeometry, Mesh, MeshLambertMaterial } from 'three'
+
+export const genParticle = (scene: Scene) => {
+  const geometry = new BoxBufferGeometry(20, 20, 20)
+
+  for (let i = 0; i < 4000; i++) {
+    const object = new Mesh(
+      geometry,
+      new MeshLambertMaterial({ color: Math.random() * 0xffffff })
+    )
+
+    object.position.x = Math.random() * 800 - 400
+    object.position.y = Math.random() * 800 - 400
+    object.position.z = Math.random() * 800 - 400
+
+    object.rotation.x = Math.random() * 2 * Math.PI
+    object.rotation.y = Math.random() * 2 * Math.PI
+    object.rotation.z = Math.random() * 2 * Math.PI
+
+    object.scale.x = Math.random() + 0.5
+    object.scale.y = Math.random() + 0.5
+    object.scale.z = Math.random() + 0.5
+
+    scene.add(object)
+  }
+}