Wed Oct 18 22:53:00 CST 2023 inscode

src/threejs-tools.js

+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)
+    }
+}

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>