javascript - ThreeJS 体素未固定到网格

Question

我正在使用 ThreeJS git repo 中的体素画家示例。

我已经改变了它，使体素比示例大。它们不占用 X 坐标上的一个网格空间，而是占用 2 个网格空间。

然而，这样做意味着翻转网格不固定在网格上，而是在一侧超过一半，另一侧超过一半。

这是我的代码：

// In the example the geometry is set to (50, 50, 50)
self.rollOverGeo = new THREE.CubeGeometry(100, 50, 50);
self.rollOverMaterial = new THREE.MeshBasicMaterial({
        color: 0xff0000,
    opacity: 0.5,
    transparent: true
});
self.rollOverMesh = new THREE.Mesh(self.rollOverGeo, self.rollOverMaterial);

self.rollOverMesh.position = new THREE.Vector3(0, 25, 0);

有人知道为什么是这样吗？

Answer 1

几何图形在其局部坐标系中以原点为中心。您需要像这样翻译几何：

rollOverGeo = new THREE.CubeGeometry( 100, 50, 50 );
rollOverGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 25, 0, 0 ) );

cubeGeo = new THREE.CubeGeometry( 100, 50, 50 );
cubeGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 25, 0, 0 ) );

三.js r.61