如何修改Three.js Box3的顶点位置？代码问题咨询

咱们先从你代码里最直接的问题说起：你拼写错了vertices——写成了vetices，这会直接导致代码报错，程序自然没法正常运行。这是第一个要修正的点。

不过就算修正了拼写，还有个需要注意的细节：Box3Helper是基于你创建的Box3实例自动生成辅助线的，如果你直接修改它的几何体顶点，后续如果Box3本身有更新，这些手动修改的顶点可能会被覆盖。下面分两种场景给你解决方案：

场景1：只想修改辅助线的单个顶点（不改动原始Box3） #

按以下正确步骤操作即可：

1. 修正vertices的拼写错误
2. 推荐直接修改现有顶点的坐标属性（而非替换整个顶点对象，性能更优）
3. 必须设置verticesNeedUpdate = true，告诉Three.js顶点数据已变更，需要重新渲染

修改后的代码示例：

var anchor = new THREE.Vector3( 300, 300, 3 ); 
var cursor = new THREE.Vector3( 500, 550, 50 ); 
var box2 = new THREE.Box3( anchor, cursor ); 
var box2Helper = new THREE.Box3Helper( box2 ); 

// 直接修改现有顶点的坐标，而非替换对象
box2Helper.geometry.vertices[0].x = 20;
box2Helper.geometry.vertices[0].y = 20;
box2Helper.geometry.vertices[0].z = 20;

// 标记顶点数据需要更新
box2Helper.geometry.verticesNeedUpdate = true; 

scene.add( box2Helper );

场景2：想调整整个包围盒的形状（推荐做法） #

如果你的目标是改变整个立方体的大小/位置，而非只改辅助线的单个顶点，更合理的方式是修改原始Box3的边界，Box3Helper会自动同步更新：

var anchor = new THREE.Vector3( 300, 300, 3 ); 
var cursor = new THREE.Vector3( 500, 550, 50 ); 
var box2 = new THREE.Box3( anchor, cursor ); 
var box2Helper = new THREE.Box3Helper( box2 ); 

// 修改原始边界点的坐标
anchor.set(20, 20, 20);
// 让Box3重新计算边界
box2.setFromPoints([anchor, cursor]);

// 无需手动修改几何体，Box3Helper会自动更新辅助线
scene.add( box2Helper );

为什么你的原始代码不行？ #

除了拼写错误，直接替换顶点对象（new THREE.Vector3(20,20,20)）虽然理论上可行，但Three.js内部对顶点数组可能存在引用依赖，容易出现更新不及时的情况。直接修改现有顶点的x/y/z属性，再配合verticesNeedUpdate标记，是更稳妥的做法。

内容的提问来源于stack exchange，提问作者Aquarius_Girl