diff --git a/src/App.vue b/src/App.vue
index 138dc6306bfa3129c8f8d167e8bcb43349132c8f..c5e0a8b0029db3ad013da96a509252181b64d91f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup>
-import Basic from './views/basic.vue'
+import Lights from './views/lights.vue'
 </script>
 
 <template>
-  <Basic />
+  <Lights />
 </template>
 
 <style scoped>
diff --git a/src/assets/main.css b/src/assets/main.css
index 7c224453879e20060852f1f4721b36cd790d2509..2d3407e17999c626558885a5151ae139edf509ce 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -8,6 +8,8 @@ body {
     place-items: center;
     width: 100%;
     height: 100%;
+    background-color: #000;
+    color: #fff;
 }
 #app {
   margin: 0 auto;
@@ -58,6 +60,15 @@ a,
 .flex-1 {
     flex: 1;
 }
+.flex-align-start {
+    align-items: flex-start;
+}
+.match-width {
+    width: 100%;
+}
+.mr10px {
+    margin-right: 10px;
+}
 
 ::-webkit-scrollbar {
     display: none;
diff --git a/src/threejs-tools.js b/src/threejs-tools.js
deleted file mode 100644
index 24dcdd14d1de0965b2942a2e51f9e2024b1c92af..0000000000000000000000000000000000000000
--- a/src/threejs-tools.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ref, onMounted } from 'vue'
-import * as THREE from 'three'
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-export class ThreejsDefault {
-    constructor(container) {
-        // init scene camera
-        this.scene = new THREE.Scene()
-        this.scene.add(new THREE.GridHelper(100, 100, 0x660000, 0x004400))
-        
-        // init renderer
-        this.renderer = new THREE.WebGLRenderer()
-
-
-        this.animateFuncs = []
-        const animate = () => {
-            requestAnimationFrame(animate)
-            this.animateFuncs.forEach(animFunc => animFunc())
-            this.renderer.render(this.scene, this.camera)
-        }
-
-        onMounted(() => {
-            container.value.appendChild(this.renderer.domElement)
-            this.renderer.setSize(container.value.clientWidth, container.value.clientHeight)
-            
-            this.camera = new THREE.PerspectiveCamera(60, container.value.clientWidth / container.value.clientHeight, 0.1, 1000)
-            this.camera.position.set(0, 10, 10)
-            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-
-            animate()
-        })
-    }
-
-
-    onAnimate(animFunc) {
-        this.animateFuncs.push(animFunc)
-    }
-}
-
-export function createPlane(w = 10, h = 10, position = [0, .1, 0], rotation = [90, 0, 0]) {
-  const material = new THREE.MeshLambertMaterial({
-    color: 0x88888888,
-    side: THREE.DoubleSide,
-    // wireframe: true,
-  })
-  const geometry = new THREE.PlaneGeometry(w, h)
-  const mesh = new THREE.Mesh(geometry, material)
-  mesh.position.set(...position)
-  mesh.rotation.set(...rotation.map(deg => deg / 180 * Math.PI))
-  return mesh
-}
diff --git a/src/threejs-utils/threejs-manager.js b/src/threejs-utils/threejs-manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..a5aa4c9a20511be4849a9a262f2bd47cf86ad46c
--- /dev/null
+++ b/src/threejs-utils/threejs-manager.js
@@ -0,0 +1,75 @@
+import { onMounted } from 'vue'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+
+import * as TT from './threejs-tools'
+
+export default class ThreejsManager {
+    constructor(container) {
+        // init scene camera
+        this.scene = new THREE.Scene()
+
+        // init renderer
+        this.renderer = new THREE.WebGLRenderer()
+
+        this.animateFuncs = {}
+        const animate = () => {
+            requestAnimationFrame(animate)
+            Object.values(this.animateFuncs).forEach(animFunc => animFunc())
+            this.renderer.render(this.scene, this.camera)
+        }
+
+        onMounted(() => {
+            container.value.appendChild(this.renderer.domElement)
+            this.renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+            
+            this.camera = new THREE.PerspectiveCamera(60, container.value.clientWidth / container.value.clientHeight, 0.1, 1000)
+            this.camera.position.set(0, 10, 10)
+            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+
+            animate()
+        })
+
+        this.initDefaultScene()
+    }
+    initDefaultScene() {
+        this.scene.add(new THREE.GridHelper(100, 100, 0x660000, 0x004400))
+        this.addPlane()
+        this.addCube()
+        this.lightHelpers = []
+        this.lightHelpers.push(this.addAmbientLight())
+        this.lightHelpers.push(this.addDirectLight())
+        this.lightHelpers.push(this.addPointLight())
+        this.lightHelpers.push(this.addSpotLight())
+    }
+    onAnimate(name, animFunc) {
+        this.animateFuncs[name] = animFunc
+    }
+    addPlane() {
+        const plane = TT.createPlane()
+        this.scene.add(plane)
+        return plane
+    }
+    addCube() {
+        const cube = TT.createCube()
+        cube.position.y = 1
+        this.onAnimate('cube', () => {
+            cube.rotation.x += 0.01
+            cube.rotation.y += 0.01
+        })
+        this.scene.add(cube)
+        return cube
+    }
+    addAmbientLight() {
+        return TT.addLight(this.scene, THREE.AmbientLight, [0xffffff, .1])
+    }
+    addDirectLight() {
+        return TT.addLight(this.scene, THREE.DirectionalLight, [0xff0000, 1], [-4, 5, -3])
+    }
+    addPointLight() {
+        return TT.addLight(this.scene, THREE.PointLight, [0x00ff00, 50], [3, 3, -2], .5)
+    }
+    addSpotLight() {
+        return TT.addLight(this.scene, THREE.SpotLight, [0x0000ff, 1000, 7, .2, .5], [-1, 6, 1])
+    }
+}
diff --git a/src/threejs-utils/threejs-tools.js b/src/threejs-utils/threejs-tools.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cbb1950e42b8fb952abeecb966fbd8309029c4e
--- /dev/null
+++ b/src/threejs-utils/threejs-tools.js
@@ -0,0 +1,44 @@
+import * as THREE from 'three'
+
+export function createPlane(w = 10, h = 10, position = [0, .1, 0], rotation = [90, 0, 0]) {
+  const material = new THREE.MeshLambertMaterial({
+    color: 0x88888888,
+    side: THREE.DoubleSide,
+    // wireframe: true,
+  })
+  const geometry = new THREE.PlaneGeometry(w, h)
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.position.set(...position)
+  mesh.rotation.set(...rotation.map(deg => deg / 180 * Math.PI))
+  return mesh
+}
+
+export function createCube() {
+    const geometry = new THREE.BoxGeometry(1, 1, 1)
+    const material = new THREE.MeshLambertMaterial({ color: 0xffffff })
+    const cube = new THREE.Mesh(geometry, material)
+    return cube
+}
+
+export function createLight(lightConstuctor, lightArgs = [0xffffff, 1], lightPos = [0, 0, 1], ...helperArgs) {
+    const light = new lightConstuctor(...lightArgs)
+    light.position.set(...lightPos)
+    let helperType
+    if (lightConstuctor === THREE.AmbientLight) {
+    } else if (lightConstuctor === THREE.DirectionalLight) {
+        helperType = THREE.DirectionalLightHelper
+    } else if (lightConstuctor === THREE.PointLight) {
+        helperType = THREE.PointLightHelper
+    } else if (lightConstuctor === THREE.SpotLight) {
+        helperType = THREE.SpotLightHelper
+    }
+    const helper = helperType && new helperType(light, ...helperArgs) || {light, isMockHelper: true}
+    return helper
+}
+
+export function addLight(scene, ...createArgs) {
+    const helper = createLight(...createArgs)
+    scene.add(helper.light)
+    helper.isMockHelper || scene.add(helper)
+    return helper
+}
\ No newline at end of file
diff --git a/src/views/light-option.vue b/src/views/light-option.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6bb131f7014aa992da8af7c531de4e1f3d57d5ba
--- /dev/null
+++ b/src/views/light-option.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="options">
+        <h1>Light Options {{test}}</h1>
+        <div v-for="l in props.lights" class="light-option flex-col flex-align-start">
+            <Checkbox :label="l.name" v-model="l.visible">{{l.type}}</Checkbox>
+            <div class="match-width flex-row">
+                <label class="mr10px">强度</label>
+                <Slider class="flex-1" v-model="l.intensity" :step=l._intensity*.01 :max=l._intensity*10></Slider>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRef, watch, onMounted, defineProps } from 'vue'
+const props = defineProps({
+    lights:{
+        type: Array,
+    },
+})
+props.lights.forEach(l => {
+    l._intensity = l.intensity
+})
+const test = reactive(1)
+</script>
+
+<style scoped>
+.options {
+  width: 100%;
+  height: 100%;
+  padding: 40px 20px;
+  align-items: flex-start;
+}
+.light-option {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/lights.vue b/src/views/lights.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1e42c6f5c650c1b9989a55b418b41f97d53842c0
--- /dev/null
+++ b/src/views/lights.vue
@@ -0,0 +1,35 @@
+<template>
+  <div id="root" class="flex-row">
+    <LightOption class="options" :lights="lights" />
+    <div id="container" ref="container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRef, watch, onMounted } from 'vue'
+import * as THREE from 'three'
+import ThreeManager from '../threejs-utils/threejs-manager'
+import LightOption from './light-option.vue'
+
+const container = ref(null)
+const tm = new ThreeManager(container)
+const lights = reactive(tm.lightHelpers.map(helper => helper.light))
+
+</script>
+
+<style scoped>
+#root {
+  width: 100%;
+  height: 100%;
+  align-items: flex-start;
+}
+.options {
+  flex: 1;
+}
+#container {
+  flex: 2;
+  width: 100%;
+  height: 100%;
+}
+
+</style>