threejs添加辅助坐标系

<template>
 <div class="container" ref="containerRef"></div>
</template>
<script lang="ts" setup>
// 导入Three.js库
import * as THREE from 'three';
// 定义一个引用，用于后续引用包含渲染器的DOM元素
const containerRef = ref<HTMLDivElement>();
// 初始化渲染器，并设置其大小与当前窗口大小一致
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建一个透视相机，并设置其位置和视角
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
renderer.render(scene, camera);
// const material = new THREE.MeshBasicMaterial({
//     color: 0x0000ff, //设置材质颜色
//     transparent:true,//开启透明
//     opacity:0.5,//设置透明度
// });
onMounted(()=>{
    containerRef.value?.appendChild(renderer.domElement)
})
</script>
<style lang="scss" scoped>
</style>