From 60053beec8514a3639a3bf1286682d5246836b6e Mon Sep 17 00:00:00 2001
From: skyun <skyun@devide>
Date: Wed, 18 Oct 2023 22:53:00 +0800
Subject: [PATCH] Wed Oct 18 22:53:00 CST 2023 inscode

---
 src/threejs-tools.js | 36 ++++++++++++++++++++++++++++++++++
 src/views/basic.vue  | 46 +++++++++++++++++++-------------------------
 2 files changed, 56 insertions(+), 26 deletions(-)
 create mode 100644 src/threejs-tools.js

diff --git a/src/threejs-tools.js b/src/threejs-tools.js
new file mode 100644
index 0000000..7d30d96
--- /dev/null
+++ b/src/threejs-tools.js
@@ -0,0 +1,36 @@
+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.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+        this.camera.position.z = 5
+
+        // 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 = () => {
+            requestAnimationFrame(animate)
+            this.animateFuncs.forEach(animFunc => animFunc())
+            this.renderer.render(this.scene, this.camera)
+        }
+
+        onMounted(() => {
+            container.value.appendChild(this.renderer.domElement)
+            animate()
+        })
+    }
+
+
+    onAnimate(animFunc) {
+        this.animateFuncs.push(animFunc)
+    }
+}
diff --git a/src/views/basic.vue b/src/views/basic.vue
index 8a818a3..8139b7c 100644
--- a/src/views/basic.vue
+++ b/src/views/basic.vue
@@ -4,41 +4,35 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import * as TT from '../threejs-tools'
 import * as THREE from 'three'
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-// init scene camera
-const scene = new THREE.Scene()
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
-camera.position.z = 5
-
-// init renderer
 const container = ref(null)
-const renderer = new THREE.WebGLRenderer()
-renderer.setSize(window.innerWidth, window.innerHeight)
-const animate = () => {
-    requestAnimationFrame(animate)
+const td = new TT.ThreejsDefault(container)
+
+// add mesh
+const geometry = new THREE.BoxGeometry(1, 1, 1)
+const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
+const cube = new THREE.Mesh(geometry, material)
+td.scene.add(cube)
+td.onAnimate(() => {
     cube.rotation.x += 0.01
     cube.rotation.y += 0.01
-    renderer.render(scene, camera)
-}
-onMounted(() => {
-    container.value.appendChild(renderer.domElement)
-    animate()
 })
 
-// init controls
-const controls = new OrbitControls(camera, renderer.domElement);
+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
+})
 
-// init lights
-const light = new THREE.AmbientLight(0xffffff); // soft white light  
-scene.add(light);  
+// add light
+td.scene.add(new THREE.AmbientLight(0xffffff));  
 
-// user code
-const geometry = new THREE.BoxGeometry(1, 1, 1)
-const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 })
-const cube = new THREE.Mesh(geometry, material)
-scene.add(cube)
 
 </script>
 
-- 
GitLab