相关疑难解决方法(0)

我试图在Three.js中编写一个小程序,显示两个球体,一个在另一个内部.球2的半径应该在0.5和1.5之间振荡,而球1的半径总是1.0.每个球体都是透明的(不透明度:0.5),因此可以看到较大球体中包含的较小球体.当然,随着球体2的半径变化,"较小"和"较大"的作用会发生变化.

现在的问题是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 …

环境:WebGL,Chrome.使用透明png作为模型的纹理时,我有以下行为:

1. 图像A - 树隐藏在它后面的建筑物,我看到世界框纹理.它也隐藏自己(后面的分支不可见)
2. 同时 - 图像B - 工作正常,窗口是透明的,我看到后面是什么

A: B:

两个屏幕截图都是在同一场景中同时从不同的摄像头位置进行的.纹理由相同的算法产生.

我无法理解窗口和分支透明度之间的区别.我的主要问题是 - 如何修复分支以便不隐藏它们后面的对象？着色器代码是:

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);

我玩启用/禁用混合和depth_test,有时得到想要的结果,但不确定它是否是正确的做事方式.

我努力地解决了这个问题,似乎无法渲染.

怎么能解决这个问题呢？我希望OpenGL渲染它看起来像下面这张图片的右侧:

transcut http://glasier.hk/image/transcut.png

每张脸都是这样的:

geometry = new THREE.PlaneGeometry(w,h,1,1,1);
base = new THREE.MeshBasicMaterial( { color: pass.color, transparent: true, side: THREE.DoubleSide} )
material = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture(pass.img), transparent: true, opacity:1, side: THREE.DoubleSide });
shape = new THREE.Mesh(geometry, material);

我做错了什么？