求助：如何使用Three.js修改画布中3D物体的位置

嘿，我来帮你理清这个位置调整的问题！你之前的两种尝试没成功，是因为没找对控制物体位置的正确对象，我来给你拆解一下：

为什么你的尝试失效了？ #

• 修改geometry.position没用：几何体（BoxGeometry）的position属性是用来调整顶点相对于自身局部原点的偏移，并不是物体在场景中的全局位置。真正控制物体在场景中位置的是Mesh对象（也就是你创建的cube）的position属性。
• scene.children[1].position无效：你的代码里并没有把相机添加到场景中，此时场景的children数组里只有你后来添加的cube（索引是0），scene.children[1]根本不存在，自然无法修改它的位置。

正确的位置修改方法 #

直接操作Mesh对象的position属性就可以了，有两种常用方式：

方式1：单独设置坐标轴值 #

// 创建立方体后，直接修改cube的位置
var cube = new THREE.Mesh(geometry, material);
cube.position.x = 1;
cube.position.y = 1;
cube.position.z = 1;
scene.add(cube);

方式2：用set()方法一次性设置三个轴的值 #

var cube = new THREE.Mesh(geometry, material);
cube.position.set(1, 1, 1); // x=1, y=1, z=1
scene.add(cube);

多物体位置调整示例 #

如果要添加多个立方体并分别设置位置，可以用循环实现：

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 geometry = new THREE.BoxGeometry(2, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 第一个立方体在(1,1,1)
var cube1 = new THREE.Mesh(geometry, material);
cube1.position.set(1, 1, 1);
scene.add(cube1);

// 第二个立方体在(-1,-1,0)
var cube2 = new THREE.Mesh(geometry, material.clone()); // 克隆材质避免共享状态
cube2.material.color.set(0xff0000); // 换个颜色区分
cube2.position.set(-1, -1, 0);
scene.add(cube2);

camera.position.z = 5;
renderer.render(scene, camera);

这样就能轻松控制每个3D物体在场景中的位置啦！

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