70

我正在尝试在 Three.js 中编写一个小程序，它显示两个球体，一个在另一个球体内部。sphere2 的半径应该在 0.5 和 1.5 之间波动，而 sphere1 的半径始终为 1.0。每个球体都是透明的（不透明度：0.5），因此可以看到较大的球体中包含的较小的球体。当然，“更小”和“更大”的角色随着 sphere2 半径的变化而变化。

现在的问题是 Three.js 使我在我的程序中定义的第一个球体变得透明，而不是第二个球体。如果我定义第一个 sphere1 那么它变得透明但 sphere2 完全不透明。如果我定义第一个 sphere2 那么这是透明的。将它们添加到场景中的顺序不起作用。

我在下面包含了一个显示正在发生的事情的最小程序（没有动画）。在其当前状态下，只有 sphere1 可见且不透明。如果我在 sphere2 之前定义 sphere1 则 sphere1 变得透明但 sphere2 不再透明。将 sphere2 的半径更改为 1.2 将隐藏 sphere1。

有没有办法让两个球体都透明？

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

camera.position.set(0, 0, 3);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

var ambient = new THREE.AmbientLight( 0x555555 );
scene.add(ambient);

var light = new THREE.DirectionalLight( 0xffffff );
light.position = camera.position;
scene.add(light);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Definition 2
var geometry2 = new THREE.SphereGeometry(0.8,32,24);
var material2 = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0.5});
var sphere2 = new THREE.Mesh(geometry2, material2);

// Definition 1
var geometry1 = new THREE.SphereGeometry(1.0,32,24);
var material1 = new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true, opacity: 0.5});
var sphere1 = new THREE.Mesh(geometry1, material1);

scene.add(sphere1);
scene.add(sphere2);

renderer.render(scene, camera);
4

3 回答 3

173

你的两个球体都是透明的，并且一直如此。发生的事情是较小的球体根本没有被渲染。

WebGL 中的透明度很棘手。您可以搜索该问题以了解更多信息。

但是您偶然发现了一个与three.js 特别是如何处理透明度相关的问题。

three.jsWebGLRenderer中的对象根据与相机的距离对对象进行排序，并按照从最远到最近的顺序渲染透明对象。（这是很重要的一点：它根据对象的位置对对象进行排序，并按排序顺序呈现对象。）

因此，要正确渲染两个透明对象，必须先渲染后面的对象（在您的情况下是较小的球体）。否则，由于深度缓冲区，它根本不会被渲染。

但是在您的情况下，您有两个位于同一位置的球体，因此与相机等距。这就是问题——首先渲染哪个；这是一个折腾。

因此，您需要将较小的球体放置得比较大的球体更远离相机，以便正确渲染场景。

一种解决方案是将较小的球体向后移动一点。

另一种解决方案是设置renderer.sortObjects = false. 然后对象将按照它们添加到场景中的顺序进行渲染。在这种情况下，请务必先将较小的球体添加到场景中。

第三种解决方案是设置material1.depthWrite = false和material2.depthWrite = false。

编辑：

具有material.transparent = false（不透明对象）的可渲染对象在具有material.transparent = true（透明对象）的对象之前渲染。

所以第四个解决方案是使较小的球体不透明，以便首先渲染它。

r.71 的新功能：

现在有一处Object3D.renderOrder房产。在每一类对象（不透明或透明）中，对象按 指定的顺序呈现object.renderOrder。renderOrder的默认值为0。注意renderOrder不被子对象继承；您必须为每个可渲染对象设置它。

renderOrder如上所述，具有相同（关系）的对象按深度排序。

所以第五个解决方案是设置renderOrder = 1更大的球体。在您的情况下，这可能是最好的解决方案。

三.js r.71

于 2013-04-14T03:30:45.137 回答
11

一对夫妇的评论。

第一的。如果您要问一个希望人们审查代码的问题，请将其放在 jsfiddle 中。如果你这样做，你会让更多的人偷看。话虽如此，这里是您在 jsfiddle 中的代码稍作修改的版本，请将其用作未来问题的指南。 jsfiddle 示例

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

camera.position.set(0, 0, 3);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

var ambient = new THREE.AmbientLight( 0x555555 );
scene.add(ambient);

var light = new THREE.DirectionalLight( 0xffffff );
light.position = camera.position;
scene.add(light);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.sortObjects = false;

// Definition 2
var geometry2 = new THREE.SphereGeometry(0.8,32,24);
var material2 = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0.5});
var sphere2 = new THREE.Mesh(geometry2, material2);

// Definition 1
var geometry1 = new THREE.SphereGeometry(1.0,32,24);
var material1 = new THREE.MeshLambertMaterial({color: 0xff0000, transparent: true, opacity: 0.5});
var sphere1 = new THREE.Mesh(geometry1, material1);

scene.add(sphere2);
scene.add(sphere1);

renderer.render(scene, camera);

我在您的代码中所做的更改是将 sortObjects 设置为 false，然后更改球体添加到场景中的顺序。这样做是因为接下来 2 个链接中的信息

WebGL 透明平面 透明纹理行为

于 2013-04-14T02:53:52.130 回答
0

对于它的价值，我无法使用上述方法解决相同的问题，但发现具有：

scene = new THREE.Scene();
group = new THREE.Group();
scene.add( group );

在我的 init() 中，然后将正面网格添加到场景中，但是要分组的背面网格解决了这个问题。IE：

var materialfront = new THREE.MeshPhongMaterial({ 
opacity:1, map:texture });
materialfront.transparent = true ;     
materialfront.side = THREE.FrontSide ; 
frontthing = new THREE.Mesh( geometry, materialfront );
frontthing.renderOrder = 2;
scene.add(frontthing);

然后

var texture2 = texture.clone();
texture2.needsUpdate = true;
var materialBack = new THREE.MeshPhongMaterial({
opacity:0.1, map: texture2})
materialBack.transparent = true ;
materialBack.side = THREE.BackSide;
backthing = new THREE.Mesh( geometryback, materialBack );
backthing.renderOrder = 1;
group.add(backthing);

我的材质贴图是透明的 .png 纹理。

我无法解释为什么其他建议的方法对我不起作用，但我希望以上内容可能对处于类似位置的人有所帮助。

于 2018-09-23T18:54:16.963 回答