Thu Oct 19 04:53:00 CST 2023 inscode

.inscode

@@ -11,4 +11,4 @@ XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
 
 [debugger]
-program = "main.js"
+program = "npm run preview"

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "guess": "^1.0.2",
     "three": "^0.157.0",
+    "view-ui-plus": "^1.3.14",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/assets/base.css

@@ -60,7 +60,6 @@
 }
 
 body {
-  min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

src/assets/main.css

 @import "./base.css";
-
+html {
+    width: 100%;
+    height: 100vh;
+}
+body {
+    display: flex;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+}
 #app {
-  max-width: 1280px;
   margin: 0 auto;
   font-weight: normal;
+  width: 100%;
+  height: 100%;
 }
 
 a,
@@ -23,11 +33,32 @@ a,
   body {
     display: flex;
     place-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   #app {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    /* grid-template-columns: 1fr 1fr; */
+    width: 100%;
+    height: 100%;
   }
 }
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.flex-1 {
+    flex: 1;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
+import ViewUIPlus from 'view-ui-plus'
+import 'view-ui-plus/dist/styles/viewuiplus.css'
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App)
+  .use(ViewUIPlus)
+  .mount('#app')

src/threejs-tools.js

@@ -6,15 +6,11 @@ export class ThreejsDefault {
     constructor(container) {
         // init scene camera
         this.scene = new THREE.Scene()
-        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
-        this.camera.position.z = 5
-
+        this.scene.add(new THREE.GridHelper(100, 100, 0x660000, 0x004400))
+        
         // init renderer
         this.renderer = new THREE.WebGLRenderer()
-        this.renderer.setSize(window.innerWidth, window.innerHeight)
 
-        // init controls
-        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 
         this.animateFuncs = []
         const animate = () => {
@@ -25,6 +21,12 @@ export class ThreejsDefault {
 
         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()
         })
     }
@@ -34,3 +36,16 @@ export class ThreejsDefault {
         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
+}

src/views/basic.vue

 <template>
-  <div ref="container"></div>
+  <div id="root" class="flex-row">
+    <div id="options" class="flex-col" size="large">
+        <div>
+            <Checkbox label="环境光" v-model="ambientOptions.visible">环境光</Checkbox>
+            <Slider class="flex-1" v-model="ambientOptions.intensity" step=.01 max=5></Slider>
+        </div>
+        <div>
+            <Checkbox label="平行光" v-model="directOptions.visible">平行光</Checkbox>
+            <Slider class="flex-1" v-model="directOptions.intensity" step=.1 max=10></Slider>
+        </div>
+        <div>
+            <Checkbox label="点光源" v-model="pointOptions.visible">点光源</Checkbox>
+            <Slider class="flex-1" v-model="pointLight.intensity" step=1 max=1000></Slider>
+        </div>
+        <div>
+            <Checkbox label="聚光灯" v-model="spotOptions.visible">聚光灯</Checkbox>
+            <Slider class="flex-1" v-model="spotOptions.intensity" step=10 max=10000></Slider>
+        </div>
+    </div>
+    <div id="container" ref="container"></div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, reactive, watch, onMounted } from 'vue'
 import * as TT from '../threejs-tools'
 import * as THREE from 'three'
 
@@ -11,30 +31,98 @@ const container = ref(null)
 const td = new TT.ThreejsDefault(container)
 
 // add mesh
+td.scene.add(TT.createPlane())
+
 const geometry = new THREE.BoxGeometry(1, 1, 1)
-const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
+const material = new THREE.MeshLambertMaterial({ color: 0xffffff })
 const cube = new THREE.Mesh(geometry, material)
-td.scene.add(cube)
+cube.position.y = 1
 td.onAnimate(() => {
     cube.rotation.x += 0.01
     cube.rotation.y += 0.01
 })
-
-const geometry2 = new THREE.BoxGeometry(1, 1, 1)
-const material2 = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
-const cube2 = new THREE.Mesh(geometry2, material2)
-cube2.position.y += 2
-td.scene.add(cube2)
-td.onAnimate(() => {
-    cube2.rotation.x += 0.01
-    cube2.rotation.y += 0.01
-})
+td.scene.add(cube)
 
 // add light
-td.scene.add(new THREE.AmbientLight(0xffffff));  
+function initLight(opts = {}, lightClass, lightArgs = [], helperClass, helperArgs = []) {
+    // 合并options
+    const defaultOpts = {
+        color: 0xffffff,
+        intensity: 1,
+        visible: true,
+    }
+    const options = reactive({
+        ...defaultOpts,
+        ...opts,
+    })
 
+    // 添加light
+    const light = new lightClass(options.color, options.intensity, ...lightArgs)
+    light.visible = options.visible
+    options.position && light.position.set(...options.position)
+    td.scene.add(light)
+
+    // 添加helper
+    let helper = {}
+    if (helperClass) {
+        helper = new helperClass(light, ...helperArgs)
+        helper.visible = options.visible
+        td.scene.add(helper)
+    }
+
+    // 监听options变化
+    watch(options, () => {
+        light.visible = options.visible
+        light.intensity = options.intensity
+        helper.visible = options.visible
+    })
+
+    return [options, light, helper]
+}
+
+const [ambientOptions] = initLight({visible: true, intensity: .1}, THREE.AmbientLight)
+const [directOptions] = initLight(
+    {position: [-4, 5, -3], color: 0xff0000, intensity: 5},
+    THREE.DirectionalLight, [],
+    THREE.DirectionalLightHelper,
+)
+const [pointOptions, pointLight] = initLight(
+    {position: [3, 3, -2], color: 0x00ff00, intensity: 100},
+    THREE.PointLight, [],
+    THREE.PointLightHelper, [.5],
+)
+const [spotOptions, spotLight, spotHelper] = initLight(
+    {position: [-1, 7, 1], color: 0x0000ff, intensity: 5000},
+    THREE.SpotLight, [10, .2, 1],
+    THREE.SpotLightHelper,
+)
 
 </script>
 
 <style scoped>
+#root {
+  width: 100%;
+  height: 100%;
+  align-items: flex-start;
+}
+#options {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  padding: 40px 20px;
+  align-items: flex-start;
+}
+#options > div {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+}
+#container {
+  flex: 5;
+  width: 100%;
+  height: 100%;
+}
+
 </style>