three.js - Three.js 中的间歇半透明球体

Question

我希望有人向我解释如何实现此示例中的蓝色半透明间歇球体:(间歇红色球体旁边的球体)

http://threejs.org/examples/webgl_materials.html

我首先相信这是一个使用正确的 Material 和正确的设置的问题(特别是因为该示例是关于 Material 的)，但无论如何不确定。

希望您不会觉得我的问题不值得在这里提出。我试图分析它，但它肯定是以一种对新手不友好的方式编写的，而且我无法将这部分与其余部分分开，我在其他地方找不到解释。

Answer 1

例如，要创建部分透明的蓝色球体，您可以尝试:

var sphereGeom =  new THREE.SphereGeometry( 40, 32, 16 );
var blueMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, transparent: true, opacity: 0.5 } );
var sphere = new THREE.Mesh( sphereGeom, blueMaterial );

有关创建半透明 Material 的更多示例，请查看

http://stemkoski.github.io/Three.js/Translucence.html

如果您希望球体淡入和淡出，您可以更改更新或渲染函数中的透明度 - 使球体成为全局对象，还创建一个(全局)时钟对象来跟踪您的时间初始化，例如，使用

clock = new THREE.Clock();

然后在您的更新中，您可以例如编写

sphere.material.opacity = 0.5 * (1 + Math.sin( clock.getElapsedTime() ) );