如何在将网格添加到场景之前设置其位置（three.js）

Question

在 three.js 中，我想将一个网格添加到场景中的某个位置。 我尝试过：

// mesh is an instance of THREE.Mesh
// scene is an instance of THREE.Scene
scene.add(mesh)
scene.updateMatrixWorld(true)
mesh.matrixWorld.setPosition(new THREE.Vector3(100, 100, 100))
scene.updateMatrix()

但是它并没有影响任何事情。

我该怎么办？

- user1783292

Answer 1

我建议你在这里查看文档：http://threejs.org/docs/#Reference/Objects/Mesh

正如你可以在文档页面的顶部看到的那样，Mesh 继承自“Object3D”。这意味着您可以使用Object3D提供的所有方法或属性。因此，请单击文档页面上的“Object3D”链接并检查属性列表。您将找到属性“.position”。单击“.position”以查看它是什么数据类型。 哈哈..它是Vector3。

所以尝试做以下事情：

// scene is an instance of THREE.Scene
scene.add(mesh);
mesh.position.set(100, 100, 100);

- chsymann

---

这是正确的答案。使用mesh.position.set(x,y,z)，因为您不需要强制更新，如果您设置mesh.position = xxx，则仅更改对象属性，而不总是实时移动场景中的对象。position.set更复杂，总是将对象移动到目标位置并一次性刷新缓冲区、光源、阴影等等。 - Martin

我尝试了这个，但无法弄清它实际上在做什么。如果我画一个点，它会出现在正确的位置。但是如果我创建一个网格，并尝试设置其位置，它只会出现在某些表面随机的地方。 - Zendel

在我的情况下，mesh.position不能改变位置。但是，如Martin所述的mesh.position.set(x,y,z)可以完美地工作。 - alvaro562003

在复杂的网格情况下，“position”是指什么？某种“中心”吗？ - user9315861

“set” 在 “Vector3” 类定义中被定义。为了找到它，您必须像这样导航：网格 > Object3d > Object3d.position > Vector3 > Vector3.set - 幸运的是，这位作者还提供了一个工作代码示例。 - Jacksonkr

Answer 2

我之前在 Github 上看到过它（three.js r71）。

mesh.position.set(100, 100, 100);

并且可以为个人完成

mesh.position.setX(200);  
mesh.position.setZ(200); 

参考：https://threejs.org/docs/#api/math/Vector3

详细解释如下：

由于mesh.position是“Vector3”，Vector3()具有setX()、setY()和setZ()方法，我们可以像这样使用它。

mesh.position = new THREE.Vector3() ; //see position is Vector3()
vector1 = new THREE.Vector3();   

mesh.position.setX(100);  //or  this
vector1.setX(100)         // because all of them is Vector3()
camera1.position.setZ(100); // or this
light1.position.setY(100)   // applicable to any object.position

- bh_earth0

---

这对我有效，而chysmann的答案则不行，尽管我无法解释为什么它不行/不会。您能详细说明一下您所说的“在github上看到了它”是什么意思吗？ - Nate

我在 GitHub 的 three.js 页面上看到了它。但是现在我找不到源代码了。 - bh_earth0

这是正确的答案。使用mesh.position.set(x,y,z)，因为您不需要强制更新，如果您设置mesh.position=xxx，您只会更改对象属性，而不总是实时移动场景中的对象。position.set更加复杂，总是将对象移动到目标位置并一次性刷新缓冲区、光源、阴影等等。 - Martin

这是正确的答案。从R69开始（可从Google CDN获取的最新版本），尝试为mesh.position分配值不应该被执行，因为它是“只读”的，会导致“Uncaught TypeError: Cannot assign to read only property 'position' of [object Object]”。 - MLK.DEV

Answer 3

我更喜欢使用 Vector3 来设置位置。

   let group = new THREE.Group();

   // position of box
   let vector = new THREE.Vector3(10, 10, 10);
   
     // add wooden Box
   let woodenBox = new THREE.Mesh(boxGeometry, woodMaterial);

    //update postion
    woodenBox.position.copy(vector);

  // add to scene
   group.add(woodenBox)
   this.scene.add(group);

- Hitesh Sahu

---

你在哪里使用 position？ - Powkachu

在向量中 10,10,10 - Hitesh Sahu

这个示例真的是一次性将Vector3作为输入并设置它。 - Chris

Answer 4

如果有人正在寻找更新来自Vector3的位置的方法。

const V3 = new THREE.Vector3(0,0,0)            // Create variable in zero position
const box = new THREE.Mesh(geometry, material) // Create an object
Object.assign(box.position, V3)                // Put the object in zero position

或者

const V3 = new THREE.Vector3(0,0,0)            // Create variable in zero position
const box = new THREE.Mesh(geometry, material) // Create an object
box.position.copy(V3)

- user1272500