1.構建對象

說明：參數一表示坐標軸的長度。紅色代表 X 軸. 綠色代表 Y 軸. 藍色代表 Z 軸.

const axesHelper = new THREE.AxesHelper( 1 );

2.設置位置

axesHelper.position.y=1
axesHelper.position.x=1
axesHelper.position.z=1

3. 網格

說明：立方體在網格里面，通過網格控制立方體在場景的位置。

?const cube=new THREE.Mesh(geometry,material)cube.position.set(1,1,1)scene.add(cube)

4.顯示

說明：立方體與坐標軸重合。

5.源碼

<script setup>
import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = window.innerWidth, height = window.innerHeight;// initconst camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.set(5,2,2)const scene = new THREE.Scene();// 添加網格地面const GridHelper=new THREE.GridHelper(10,10,0x444444,'red')scene.add(GridHelper)
//   立方體的猖狂
const geometry = new THREE.BoxGeometry( 0.2,0.2,0.2);
const material = new THREE.MeshNormalMaterial();//  網格 立方體在網格里面，通過網格控制立方體在場景的位置
const cube=new THREE.Mesh(geometry,material)
cube.position.set(1,1,1)
scene.add(cube)
const renderer = new THREE.WebGLRenderer( { antialias: true } );
const controls = new OrbitControls( camera, renderer.domElement );
// 自動旋轉
controls.autoRotate=true
controls.dampingFactor=0.01
controls.enableDamping=true// 添加坐標軸
const axesHelper = new THREE.AxesHelper( 1 );
axesHelper.position.y=1
axesHelper.position.x=1
axesHelper.position.z=1
scene.add( axesHelper );renderer.setSize( width, height );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );// animationfunction animation( time ) {cube.rotation.x = time / 2000;cube.rotation.y = time / 1000;controls.update()renderer.render( scene, camera );}
</script><template>
<div></div></template><style scoped>
</style>

?