javascript - 不仅可以看到场景 BG 的折射效果，还可以看到 3D 模型的折射效果

Question

我想将折射 Material 应用于球体对象。我不仅需要看穿这个球体的场景背景，还需要看穿场景中的其他 3D 几何体。我可以设置 envMap参数使用 Scene.background .

var scene = new THREE.Scene();

scene.background = new THREE.CubeTextureLoader().setPath( '/path/to/my/assets/' )
                                                 .load( [ 'pX.png', 'nX.png', 
                                                          'pY.png', 'nY.png', 
                                                          'pZ.png', 'nZ.png' ] );

var geometry = new THREE.SphereBufferGeometry( 50, 25, 15 );

var refractedMaterial = new THREE.MeshBasicMaterial( { color: 0xfffffc, 
                                                      envMap: scene.background, 
                                             refractionRatio: 1.00 } );

var sphereMesh = new THREE.Mesh( geometry, refractedMaterial );

// And here are some 3D text for example...
// I can see this 3D text in my scene 
// but I can't see it thru refractive sphere
var textMesh = new THREE.Mesh( textGeometry, textMaterial );

scene.add( sphereMesh );
scene.add( textMesh );

题:
MeshBasicMaterial( parameters : Object )的参数是什么负责场景几何体的可见性，不仅仅是场景背景 ?

Answer 1

这种折射技术不符合您的要求。它只适用于给定的环境贴图/背景，但不适用于场景中的其他对象。
您可能想使用 THREE.Refractor这使您可以尊重场景中的其他对象。查看官方演示以查看其实际使用情况:
https://threejs.org/examples/#webgl_refraction
然而，THREE.Refractor仅适用于平面，因此您无法将其应用于球体几何体。