feat:添加物体

src/views/dataModel/index.vue

@@ -1,31 +1,48 @@
 <script setup lang="ts">
 import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { onMounted, ref } from 'vue'
 
 const container = ref<HTMLDivElement>()
 let scene: THREE.Scene
 let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
-// let controls: OrbitControls
+let controls: OrbitControls
 // let twinModel: THREE.Group // 数字孪生模型
 
 const initThree = () => {
   scene = new THREE.Scene()
-  scene.background = new THREE.Color(0xEEEEEE)
+  scene.background = new THREE.Color('black')
   // 创建相机
   camera = new THREE.PerspectiveCamera(
     75,
-    container.value?.clientWidth / container.value?.clientHeight,
-    0.1,
-    1000,
+    800 / 500,
+    1,
+    3000,
   )
-  camera.position.set(5, 5, 5)
+  camera.position.set(292, 223, 185)
+  camera.lookAt(0, 0, 0)
   // 创建渲染器
   renderer = new THREE.WebGLRenderer({ antialias: true })
-  renderer.setSize(container.value?.clientWidth || 0, container.value?.clientHeight || 0)
+  renderer.setSize(800, 500)
   renderer.setPixelRatio(window.devicePixelRatio)
   container.value?.appendChild(renderer.domElement)
 
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+
+  // 模型对象
+  const geometry = new THREE.BoxGeometry(50, 50, 50)
+  const material = new THREE.MeshBasicMaterial({
+    color: 0x0000FF,
+  })
+  const mesh = new THREE.Mesh(geometry, material)
+  scene.add(mesh)
+
+  // AxesHelper：辅助观察的坐标系
+  const axesHelper = new THREE.AxesHelper(250)
+  scene.add(axesHelper)
+
   // 添加环境光
   const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8)
   scene.add(ambientLight)
@@ -33,6 +50,7 @@ const initThree = () => {
   const pointLight = new THREE.PointLight(0xFFFFFF, 1)
   pointLight.position.set(5, 5, 5)
   scene.add(pointLight)
+  renderer.render(scene, camera)
 }
 
 onMounted(() => {