|
|
@@ -0,0 +1,116 @@
|
|
|
+<template>
|
|
|
+ <div ref="container" class="w-full h-full z-999 cursor-pointer"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
+import * as THREE from 'three'
|
|
|
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
|
|
|
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
|
|
+
|
|
|
+const container = ref<HTMLDivElement>()
|
|
|
+
|
|
|
+let scene: THREE.Scene
|
|
|
+let camera: THREE.PerspectiveCamera
|
|
|
+let renderer: THREE.WebGLRenderer
|
|
|
+let controls: OrbitControls
|
|
|
+let model: THREE.Group
|
|
|
+
|
|
|
+const init = () => {
|
|
|
+ scene = new THREE.Scene()
|
|
|
+ // scene.background = new THREE.Color(0x0a0a0a) // 移除深色背景
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
|
|
|
+ camera.position.set(3, 3, 3)
|
|
|
+ camera.lookAt(0, 0, 0)
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
|
|
+ renderer.setSize(2000, 1000)
|
|
|
+ renderer.shadowMap.enabled = true
|
|
|
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap
|
|
|
+ container.value?.appendChild(renderer.domElement)
|
|
|
+
|
|
|
+ controls = new OrbitControls(camera, renderer.domElement)
|
|
|
+ controls.enableDamping = true
|
|
|
+ controls.dampingFactor = 0.05
|
|
|
+ controls.enableZoom = true
|
|
|
+ controls.enablePan = false
|
|
|
+
|
|
|
+ const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 2) // 增加强度从1到2
|
|
|
+ scene.add(hemisphereLight)
|
|
|
+
|
|
|
+ const pointLight = new THREE.PointLight(0xffffff, 2, 100) // 增加强度从1到2
|
|
|
+ pointLight.position.set(0, 5, 5)
|
|
|
+ scene.add(pointLight)
|
|
|
+
|
|
|
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) // 增加强度从0.8到1.5
|
|
|
+ directionalLight.position.set(10, 10, 5)
|
|
|
+ directionalLight.castShadow = true
|
|
|
+ scene.add(directionalLight)
|
|
|
+
|
|
|
+ // 添加额外的环境光
|
|
|
+ const ambientLight = new THREE.AmbientLight(0x404040, 0.6) // 添加环境光
|
|
|
+ scene.add(ambientLight)
|
|
|
+
|
|
|
+ const modelUrl = new URL('../assets/model/industrialEquipment.glb', import.meta.url).href
|
|
|
+ console.log('模型URL:', modelUrl)
|
|
|
+ const loader = new GLTFLoader()
|
|
|
+ loader.load(
|
|
|
+ modelUrl,
|
|
|
+ (gltf) => {
|
|
|
+ console.log('模型加载成功:', gltf)
|
|
|
+ model = gltf.scene
|
|
|
+ model.scale.set(7, 7, 7) // 增加缩放
|
|
|
+ model.position.set(0, 0, 0)
|
|
|
+ scene.add(model)
|
|
|
+ },
|
|
|
+ (progress) => {
|
|
|
+ console.log('模型加载进度:', progress) // 加载进度
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ console.error('模型加载失败:', error)
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ const animate = () => {
|
|
|
+ requestAnimationFrame(animate)
|
|
|
+ controls.update()
|
|
|
+ if (model) {
|
|
|
+ model.rotation.y += 0.005
|
|
|
+ } else {
|
|
|
+ scene.children.forEach((child) => {
|
|
|
+ if (child instanceof THREE.Mesh && child.geometry instanceof THREE.BoxGeometry) {
|
|
|
+ child.rotation.y += 0.01
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ renderer.render(scene, camera)
|
|
|
+ }
|
|
|
+ animate()
|
|
|
+
|
|
|
+ const resize = () => {
|
|
|
+ if (container.value) {
|
|
|
+ const width = container.value.clientWidth
|
|
|
+ const height = container.value.clientHeight
|
|
|
+ camera.aspect = width / height
|
|
|
+ camera.updateProjectionMatrix()
|
|
|
+ renderer.setSize(width, height)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ window.addEventListener('resize', resize)
|
|
|
+ resize()
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ init()
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (renderer) {
|
|
|
+ renderer.dispose()
|
|
|
+ }
|
|
|
+ if (controls) {
|
|
|
+ controls.dispose()
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
