Wed Oct 18 21:49:00 CST 2023 inscode

src/assets/main.css

@@ -3,8 +3,6 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
 }
 

src/views/basic.vue

-<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>