threejs中mesh和geometry中旋转平移差异性

前言

threejs小白在学习的过程中，记录自己过程中产生的问题，以及自我的想法，如有不对请多包涵！

背景

今天在学习过程中，需要实现一个在球面模型上添加柱子的场景，最终实现的效果如下图：

没错，看着确实很简单，但是在实现过程中，想到mesh和geometry都有改变姿态的想法即旋转、平移，但是在实现的过程发现了一些问题。

推导过程

使用mesh实现

1、从最简单的在场景中的球面原点添加一个六棱柱

// 首先创建一个六棱柱 utils.js
export function useColumn(height, color) {
  const geometry = new THREE.CylinderGeometry(1, 1, height, 6);
  const material = new THREE.MeshLambertMaterial({
    color,
  });
  const mesh = new THREE.Mesh(geometry, material);
  return mesh;
}

2、在场景中添加一个球体

// utils.js
function createSphere(radius) {
  const geometry = new THREE.SphereGeometry(radius);
  const material = new THREE.MeshLambertMaterial({
    color: 0x888888,
    transparent: true,
    opacity: 0.5,
  });
  const mesh = new THREE.Mesh(geometry, material);
  return mesh;
}

3、将球体和六棱柱添加到场景中，此处省略基础的场景、相机、渲染器、光源等代码的部分

import * as THREE from "three";
import { createSphere, mathAngle, useColumn } from "./utils.js";
// 创建柱子和球面在场景中
const sumGroup = new THREE.Object3D()
const sphere = createSphere(100);
sumGroup.add(sphere)
const column = useColumn(100, 0x00ffff); 
// 首先我们将柱子放在原点处
column.position.set(0,0,0)
sumGroup.add(column)

效果如下：

距离最终效果，还需要将其绕着x轴旋转逆时针旋转90度

import * as THREE from "three";
import { createSphere, mathAngle, useColumn } from "./utils.js";
// 创建柱子和球面在场景中
const sumGroup = new THREE.Object3D()
const sphere = createSphere(100);
sumGroup.add(sphere)
const column = useColumn(100, 0x00ffff); 
// 首先我们将柱子放在原点处
column.position.set(0,0,0)
column.rotateX(-Math.PI/2)
sumGroup.add(column)

然后还需要沿着Y轴移动150的距离：

效果虽然实现了 但是会发现六棱柱在场景中的坐标轴及原点也相应的进行了移动，这在后续的姿态改变以及标签标注的位置产生了影响，影响的是自身的在世界坐标中的位置。

使用geometry实现

第一步还是绕着X轴逆时针旋转90度：

对比上方mesh绕着x轴旋转90度 很清楚的发现这次的旋转并未对六棱柱的坐标轴发生变化 还是和初始一样，接下来我们沿着z轴的反方向旋转150

和上述的对比发现六棱柱的坐标原点还是停留在最开始的位置，影响到的自身的顶点位置。

end

初次写文章，会有不足和说的不对的地方，可指出改正！以上两种写法在球面的特殊点位上差异性其实看不出来太多，但是如果改成球面上任意一点处生成一个垂直于球面的六棱柱时，就会影响姿态的写法，geometry会更好处理姿态的问题！后续在更新球面任意一点时改变六棱柱姿态问题！