使用three.js创建凹半球体

Question

我是一名具有良好js经验的web开发人员，目前我正在探索three.js的可能性。然而，我不是很熟悉3D形状和词汇，我不知道如何构建我需要的形状。

我想创建一个半球体，并能够在这个球体内投影视频。我有一个全景球形视频，我需要扭曲它，使其看起来像“平面”。多亏了Paul的教程，我已经画了一个球体，并将我的视频投影到它上。但是外球面是凸的，我需要一个凹面！我想不出该如何做到这一点。从我最初的球体中挤出一个更小的球体？

求求你救命！

Answer 1

可以通过设置其他SphereGeometry参数来创建半球体：

SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

尝试，直到你得到你想要的东西。

还必须将用于球体的材质的side属性设置为THREE.BackSide或THREE.DoubleSide。

material.side = THREE.DoubleSide;

现在还提供了EDIT - SphereBufferGeometry，它在内存方面效率更高。它的构造函数也有相同的参数。

(Three.js r.82条)

Answer 2

可以使用SphereBufferGeometry创建半球体(半球)。最后一个参数做到了：0.5 * Math.PI。此外，为了能够看到您需要使用THREE.DoubleSide进行材质的内容。

var geometry = new THREE.SphereBufferGeometry(5, 8, 6, 0, 2*Math.PI, 0, 0.5 * Math.PI);
...
material.side = THREE.DoubleSide;