three.js给xyz标注轴名称-Go服务器开发

在 Three.js 中，你可以使用 THREE.AxisHelper 来给坐标轴添加标注名称。下面是一个示例代码：

// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加坐标轴辅助器
var axisHelper = new THREE.AxisHelper(5); // 参数为辅助线长度
scene.add(axisHelper);
// 添加坐标轴名称
var fontLoader = new THREE.FontLoader();
fontLoader.load('path/to/font.json', function (font) {
    var xLabelGeometry = new THREE.TextGeometry('X', { font: font, size: 0.5 });
    var yLabelGeometry = new THREE.TextGeometry('Y', { font: font, size: 0.5 });
    var zLabelGeometry = new THREE.TextGeometry('Z', { font: font, size: 0.5 });
    var xLabelMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    var yLabelMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var zLabelMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    var xLabelMesh = new THREE.Mesh(xLabelGeometry, xLabelMaterial);
    var yLabelMesh = new THREE.Mesh(yLabelGeometry, yLabelMaterial);
    var zLabelMesh = new THREE.Mesh(zLabelGeometry, zLabelMaterial);
    xLabelMesh.position.x += 5; // 标注位置偏移
    yLabelMesh.position.y += 5;
    zLabelMesh.position.z += 5;
    scene.add(xLabelMesh);
    scene.add(yLabelMesh);
    scene.add(zLabelMesh);
    // 渲染场景
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
});