旋转、缩放、平移几何体 ·Geometry Transform· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Geometry 变换vsMeshObject3D变换的本质区别geometry.scale / translate / rotateX / center直接改写顶点坐标何时该改 geometry何时该改 mesh.position/rotation效果说明对三角形几何体依次执行放大、平移、旋转最后center()重新居中。控制台可看到attributes.position.array数值变化。核心概念Three.js 有两套变换体系| 层级 | API | 影响对象 | 典型场景 | |------|-----|---------|---------| |Object3D|mesh.position/rotation/scale| 整个物体矩阵变换 | 移动/旋转模型 | |BufferGeometry|geometry.translate/rotateX/scale/center|顶点坐标本身| 建模时调整形状、居中 pivot |geometry.scale(2, 2, 2); // 顶点 ×2geometry.translate(50, 0, 0); // 顶点整体平移 geometry.rotateX(Math.PI / 4); // 绕 X 轴旋转 45° geometry.center(); // 重新计算 bounding box 并移到原点关键理解geometry.translate()改的是 Float32Array 里的数字mesh.position.set()改的是物体的模型矩阵顶点数据不变。::: warning 注意 Geometry 变换是不可逆的除非 clone 备份。运行时动画应优先用mesh.rotation等 Object3D 属性。 :::实现步骤创建 BufferGeometry 矩形6 顶点依次 scale → translate → rotateX → centerconsole.log(geometry.attributes.position)观察变化创建 Points / Line / Mesh 展示代码要点import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls.jsconst scene new THREE.Scene();// 网格模型Mesh其实就一个一个三角形(面)拼接构成 const geometry new THREE.BufferGeometry(); const vertices new Float32Array([ 0, 0, 0, 50, 0, 0, 50, 0, 50,0, 0, 0, 0, 0, 50, 50, 0, 50, ]);geometry.attributes.position new THREE.BufferAttribute(vertices, 3);// 点渲染模式 const material2 new THREE.PointsMaterial({ color: 0xffff00, size: 10.0 //点对象像素尺寸 }); const points new THREE.Points(geometry, material2); //点模型对象 scene.add(points); // 线材质对象 const material1 new THREE.LineBasicMaterial({ color: 0xff0000 //线条颜色 }); // 创建线模型对象 const line new THREE.Line(geometry, material1); scene.add(line); // 网格 const material new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide, }); const mesh new THREE.Mesh(geometry, material); scene.add(mesh);// 几何体xyz三个方向都放大2倍 geometry.scale(2, 2, 2); // 几何体沿着x轴平移50 geometry.translate(50, 0, 0); // 几何体绕着x轴旋转45度 geometry.rotateX(Math.PI / 4); // 居中已经偏移的几何体居中执行.center()你可以看到几何体重新与坐标原点重合 geometry.center(); // 几何体旋转、缩放或平移之后查看几何体顶点位置坐标的变化 // BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标 console.log(顶点位置数据, geometry.attributes.position);// AxesHelper const axesHelper new THREE.AxesHelper(150); scene.add(axesHelper);// 相机 const camera new THREE.PerspectiveCamera(); //相机 camera.position.set(200, 200, 200); //相机位置 camera.lookAt(0, 0, 0); //相机观察位置// 渲染器 const renderer new THREE.WebGLRenderer(); // 创建渲染器 const box document.getElementById(box); renderer.setSize(box.clientWidth, box.clientHeight); //渲染区域 renderer.render(scene, camera); //执行渲染 box.appendChild(renderer.domElement);;const controls new OrbitControls(camera, renderer.domElement); controls.addEventListener(change, function () { renderer.render(scene, camera); });完整源码GitHub小结本文提供旋转、缩放、平移几何体完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库