相关疑难解决方法(0)

我的场景中有两个网格。中间有一个圆柱体和一架经典飞机。我在圆柱体上应用了 png 纹理，这样我们就可以看穿。它似乎适用于气缸。

在此屏幕截图中，您可以轻松地看到我的问题：我不明白为什么我的图像在圆柱体后面不可见。

我用于气缸的代码：

myCylinderMesh.material.transparent = true;
myCylinderMesh.material.side = THREE.DoubleSide;

我怎样才能看到隐藏在圆柱体后面的图像部分？

编辑1：

我添加了 @ScieCode 发送给我的代码：

myCylinderMesh.material.alphaTest = 0.5;

结果如下：

它效果更好：现在我可以看到图像中缺失的部分。但缺少一件事：我的圆柱体的不透明度。我应该也能看到字母背后我的形象。目前我有这样的不透明度：

myCylinderMesh.material.opacity = 0.7;

你知道我错过了什么吗？谢谢

编辑2：

这是我的两个网格的代码：

圆柱 ：

geoCylinder = new THREE.CylinderBufferGeometry( 0.4, 0.4, 2*Math.PI*0.4/(2048/128), 64, 1, true ); 

matCylinder = new THREE.MeshBasicMaterial( { map:texture, transparent:true, color:0x000000, alphaTest: 0.5, opacity: 0.6, side: THREE.DoubleSide } );

meshCylinder = new THREE.Mesh( geoCylinder, matCylinder );

飞机 ：

geoPlane = new THREE.PlaneBufferGeometry( 0.8, 0.8 );

matPlane = new THREE.MeshBasicMaterial( { map: texturePlane, transparent:true} …

我一直在研究一个运行在Three.js库之上的WebGL项目.我正在渲染几个半透明网格,我注意到根据您倾斜相机的角度,一个不同的对象在顶部.

为了说明这个问题,我使用了三个半透明的立方体进行了快速演示.当您将图像旋转过去垂直于屏幕时,最小立方体的后半部分会"跳跃"并且不再可见.但是,它不应该仍然可见吗？我尝试调整一些混合方程式,但这似乎没有什么区别.

我想知道的是,这是否是WebGL/Three中的一个错误,或者我可以解决的问题.任何见解都会非常感激:)

我正在使用 ThreeJS r65 创建一个简单的多维数据集。立方体的相对面分配了相同的颜色：

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

renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0xffffff, 0); // bg color
document.body.appendChild(renderer.domElement); // displays canvas

camera.position.z = 13; // move away to see coord center
camera.position.y = 7;

controls = new THREE.OrbitControls(camera, renderer.domElement);

// CUBE
var geometry = new THREE.CubeGeometry(2,2,2);
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0x33AA55, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x55CC00, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, side: THREE.DoubleSide}), …