From f414f2e2ee2e57abe797093f153e1063199fb44a Mon Sep 17 00:00:00 2001
From: skyun <skyun@devide>
Date: Wed, 18 Oct 2023 21:49:00 +0800
Subject: [PATCH] Wed Oct 18 21:49:00 CST 2023 inscode

---
 src/assets/main.css |  2 --
 src/views/basic.vue | 52 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index c133f91..393b942 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,8 +3,6 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
 }
 
diff --git a/src/views/basic.vue b/src/views/basic.vue
index 52e27b1..8a818a3 100644
--- a/src/views/basic.vue
+++ b/src/views/basic.vue
@@ -1,16 +1,46 @@
-<script setup>
-    import * as THREE from 'three';  
-    this.scene = new THREE.Scene();  
-    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
-    camera.position.z = 5;  
-    const renderer = new THREE.WebGLRenderer();  
-    renderer.setSize(window.innerWidth, window.innerHeight);  
-    return { scene, camera, renderer };  
-</script>
-
 <template>
-    <h1>Basic</h1>
+  <div ref="container"></div>
 </template>
 
+<script setup>
+import { ref, onMounted } from 'vue'
+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)
+    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);
+
+// init lights
+const light = new THREE.AmbientLight(0xffffff); // soft white light  
+scene.add(light);  
+
+// 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>
+
 <style scoped>
 </style>
-- 
GitLab