在three.js中将网格添加到场景之前如何设置网格的位置

Posted 2023-02-27

【中文标题】在three.js中将网格添加到场景之前如何设置网格的位置

【英文标题】：How can I set the position of a mesh before I add it to the scene in three.js

【发布时间】：2012-12-22 19:02:58

【问题描述】：

在three.js中，我想在场景中的某个位置添加一个网格

我试过了：

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

但它没有影响任何东西。

我该怎么办？

【参考方案1】：

如果有人正在寻找从 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)

【参考方案2】：

我更喜欢使用 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);

【讨论】：

你在哪里使用position？

在向量 10,10,10

这个例子真的把一个 Vector3 作为输入并一次性设置它

【参考方案3】：

我之前在 github 上看到过。 (三.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

【讨论】：

这对我有用，而 chysmann 的答案却没有，尽管我无法解释为什么它不会/不会。您能否详细说明“在 github 上看到”是什么意思？

我在 github three.js 页面上看到了它。但我现在找不到源

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

这是正确答案。从 R69（Google CDN 提供的最新发行版）开始，不应将值分配给 mesh.position，因为它是 read only，导致 Uncaught TypeError: Cannot assign to read only property 'position' of [object Object]。

【参考方案4】：

我建议您在此处查看文档： http://threejs.org/docs/#Reference/Objects/Mesh 正如您在文档页面顶部看到的那样，Mesh 继承自“Object3D”。这意味着您可以使用 Object3D 提供的所有方法或属性。因此，单击文档页面上的“Object3D”链接并检查属性列表。你会发现属性“.position”。点击“.position”查看它是什么数据类型。 Paha..它的 Vector3。

所以尝试执行以下操作：

//scene is a THREE.Scene
scene.add(mesh);
mesh.position.set(100, 100, 100);

【讨论】：

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

我试过这个，但无法弄清楚它实际上在做什么。如果我画一个点，它就在正确的位置。但如果我创建一个网格并尝试设置位置，它只会出现在某个明显随机的位置。

在我的情况下：mesh.position 不会改变位置。但是 Martin 提到的 mesh.position.set(x,y,z) 效果很好。

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

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