帮我写一个vue中threejs加载gltf模型，并在点击gltf模型后模型周边线框高亮事件完整代码

好的，以下是完整代码：

<template>
<div class="container">
<div id="canvas-container"></div>
</div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
mounted() {
this.init();
},
methods: {
init() {
// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);

// 加载模型
const loader = new GLTFLoader();
loader.load('path/to/your/gltf/model.gltf', (gltf) => {
scene.add(gltf.scene);

// 给模型添加点击事件
gltf.scene.traverse((child) => {
if (child.isMesh) {
child.material.color.set('#ffffff');
child.material.wireframe = true;
child.onClick = () => {
child.material.color.set('#ff000');
};
}
});
});

// 添加灯光
const light = new THREE.PointLight(xffffff, 1, 100);
light.position.set(, , 10);
scene.add(light);

// 渲染场景
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
},
},
};
</script>

<style>
.container {
width: 100%;
height: 100%;
}

#canvas-container {
width: 100%;
height: 100%;
}
</style>