在 el-dialog 页面中使用 Three.js 绘制物体并绑定双击事件。首先，在 el-dialog 中创建一个 canvas 元素用于渲染 Three.js；

在使用的el-dialog页面中使用threejs绘制物体 并给物体绑定双击事件；对应物体之间有联系的绘制箭头线

<template><div><el-dialog title="Three.js Cubes" :visible.sync="dialogVisible" width="50%"><canvas id="canvas" @dblclick="onCanvasDoubleClick"></canvas></el-dialog></div>
</template><script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';export default {data() {return {dialogVisible: false,scene: null,camera: null,renderer: null,controls: null, // 用于控制相机和旋转的对象cubes: [], // 保存立方体对象的数组arrowHelpers: [] // 保存箭头线对象的数组};},mounted() {this.initThree();},methods: {initThree() {// 获取canvas元素const canvas = document.getElementById('canvas');// 创建场景this.scene = new THREE.Scene();// 创建相机this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);this.camera.position.z = 5;// 创建渲染器this.renderer = new THREE.WebGLRenderer({ canvas });this.renderer.setSize(canvas.clientWidth, canvas.clientHeight); // 设置渲染器大小// 设置渲染器背景色this.renderer.setClearColor(0xffffff);// 添加鼠标控制this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.dampingFactor = 0.25;this.controls.rotateSpeed = 0.35;// 添加网格const gridHelper = new THREE.GridHelper(10, 10); // 设置网格大小this.scene.add(gridHelper);// 创建多个立方体并添加到场景中for (let i = 0; i < 5; i++) {const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });const cube = new THREE.Mesh(geometry, material);cube.position.x = (i - 2) * 2; // 设置不同位置this.scene.add(cube);this.cubes.push(cube); // 将立方体对象添加到数组中}// 在立方体之间绘制箭头线const startPoint = new THREE.Vector3(0, 0, 0);const endPoint = new THREE.Vector3(2, 0, 0);const direction = new THREE.Vector3().subVectors(endPoint, startPoint);const length = direction.length();const arrowHelper = new THREE.ArrowHelper(direction.normalize(), startPoint, length, 0xff0000);this.scene.add(arrowHelper);this.arrowHelpers.push(arrowHelper);// 渲染循环const animate = () => {requestAnimationFrame(animate);this.controls.update(); // 更新控制器this.renderer.render(this.scene, this.camera);};animate();},onCanvasDoubleClick(event) {// 获取双击位置const x = event.clientX;const y = event.clientY;// 将屏幕坐标转换为Three.js中的坐标const canvas = document.getElementById('canvas');const rect = canvas.getBoundingClientRect();const mouseX = ((x - rect.left) / canvas.clientWidth) * 2 - 1;const mouseY = -((y - rect.top) / canvas.clientHeight) * 2 + 1;// 创建一个Three.js射线const raycaster = new THREE.Raycaster();raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), this.camera);// 检测射线与物体的交点const intersects = raycaster.intersectObjects(this.cubes, true);// 如果有交点，则触发双击事件if (intersects.length > 0) {alert('Double click event triggered on the object!');}}}
};
</script><style>
#canvas {width: 100%;height: 100%;
}
</style>

场景。