|
|
@@ -2,106 +2,69 @@
|
|
|
<div>
|
|
|
<h2>3D 预览</h2>
|
|
|
<div ref="threeCanvas" style="width: 400px; height: 400px;"></div>
|
|
|
-
|
|
|
- <!-- el-image 用于展示图片 -->
|
|
|
- <el-image
|
|
|
- :src="formatImageUrl(newImageUrl)"
|
|
|
- fit="contain"
|
|
|
- style="width: 200px; height: 200px; display: block; margin-top: 10px;"
|
|
|
- :preview-src-list="[formatImageUrl(newImageUrl)]"
|
|
|
- :initial-index="0"
|
|
|
- @load="handleImageLoad"
|
|
|
- ref="imgRefEl"
|
|
|
- />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, nextTick } from 'vue'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
import * as THREE from 'three'
|
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
|
|
|
|
|
-const newImageUrl = '/img/zgm.jpg'
|
|
|
-const formatImageUrl = (path) => {
|
|
|
- if (!path) return ''
|
|
|
- const base = 'http://20.0.16.128:9093'
|
|
|
- return `${base}/${path.replace(/^public\//, '')}`
|
|
|
-}
|
|
|
-
|
|
|
const threeCanvas = ref(null)
|
|
|
-const imgRefEl = ref(null)
|
|
|
|
|
|
-let scene, camera, renderer, controls, box = null
|
|
|
+let scene, camera, renderer, controls
|
|
|
|
|
|
-// 生命周期钩子
|
|
|
onMounted(() => {
|
|
|
initScene()
|
|
|
- createBox()
|
|
|
+ createTexturedBox()
|
|
|
animate()
|
|
|
})
|
|
|
|
|
|
-// 初始化 Three.js 场景
|
|
|
const initScene = () => {
|
|
|
scene = new THREE.Scene()
|
|
|
- scene.background = null
|
|
|
+ scene.background = null // 背景透明
|
|
|
|
|
|
- // 创建一个适合查看立方体的相机
|
|
|
camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
|
|
|
camera.position.set(0, 0, 5)
|
|
|
|
|
|
- // 创建渲染器
|
|
|
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
|
|
|
renderer.setSize(400, 400)
|
|
|
threeCanvas.value.appendChild(renderer.domElement)
|
|
|
|
|
|
- // 控制器
|
|
|
controls = new OrbitControls(camera, renderer.domElement)
|
|
|
controls.enableDamping = true
|
|
|
|
|
|
- // 光源配置
|
|
|
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 环境光,弱一点
|
|
|
+ // 添加环境光
|
|
|
+ const ambientLight = new THREE.AmbientLight(0xffffff, 1.0)
|
|
|
scene.add(ambientLight)
|
|
|
|
|
|
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1) // 方向光,亮一点
|
|
|
- directionalLight.position.set(5, 5, 5) // 定义光源位置
|
|
|
+ // 添加方向光
|
|
|
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0)
|
|
|
+ directionalLight.position.set(5, 5, 5)
|
|
|
scene.add(directionalLight)
|
|
|
-
|
|
|
- const pointLight = new THREE.PointLight(0xffffff, 1, 100) // 点光源
|
|
|
- pointLight.position.set(2, 2, 2)
|
|
|
- scene.add(pointLight)
|
|
|
}
|
|
|
|
|
|
-// 创建立方体
|
|
|
-const createBox = () => {
|
|
|
+const createTexturedBox = () => {
|
|
|
const geometry = new THREE.BoxGeometry(2.2, 3.5, 0.8)
|
|
|
- const materials = new Array(6).fill(new THREE.MeshStandardMaterial({ color: 0xcccccc }))
|
|
|
- box = new THREE.Mesh(geometry, materials)
|
|
|
- scene.add(box)
|
|
|
-}
|
|
|
-
|
|
|
-// 图片加载完成后作为纹理贴图
|
|
|
-const handleImageLoad = async () => {
|
|
|
- await nextTick() // 确保 el-image 渲染完成
|
|
|
-
|
|
|
- // 访问真实 <img> DOM(el-image 内部包裹的)
|
|
|
- const img = imgRefEl.value?.$el?.querySelector('img')
|
|
|
- if (!img) {
|
|
|
- console.warn('未找到图片元素')
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- const texture = new THREE.Texture(img)
|
|
|
- texture.needsUpdate = true
|
|
|
-
|
|
|
- if (box) {
|
|
|
- box.material.forEach((mat) => {
|
|
|
- mat.map = texture
|
|
|
- mat.needsUpdate = true
|
|
|
- })
|
|
|
- }
|
|
|
+ const textureLoader = new THREE.TextureLoader()
|
|
|
+
|
|
|
+ // 确保纹理加载完成后再使用
|
|
|
+ textureLoader.load(
|
|
|
+ '/src/assets/zh.jpg',
|
|
|
+ (texture) => {
|
|
|
+ const material = new THREE.MeshStandardMaterial({ map: texture })
|
|
|
+ const materials = new Array(6).fill(material)
|
|
|
+
|
|
|
+ const box = new THREE.Mesh(geometry, materials)
|
|
|
+ scene.add(box)
|
|
|
+ },
|
|
|
+ undefined,
|
|
|
+ (error) => {
|
|
|
+ console.error('纹理加载失败:', error)
|
|
|
+ }
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
-// 动画循环
|
|
|
const animate = () => {
|
|
|
requestAnimationFrame(animate)
|
|
|
controls.update()
|