Question

Codepen演示问题

https://codepen.io/anon/pen/GjJpYw?editors=0010

我有2个网格，一个包含2个立方体，另一个包含1个立方体。具有2个立方体的网格将网格与一个立方体夹在中间（因此单个立方体位于中心）。当我将所有立方体设置为透明但将中心立方体的不透明度设置为1时，我不希望能够在查看前立方体时看到后立方体，但我可以。

我想知道有什么简单的方法可以解决这个问题吗？这是我面临的问题的一个非常简化的版本，所以我不能轻易地分割几何。我也不能将透明度设置为false，因为理想情况下我希望能够使中间立方体部分透明。有什么建议吗？

var width = window.innerWidth;
var height = window.innerHeight;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cube = new THREE.Mesh(cubeGeometry);
cube.position.set(0, 25, -200);
var cube2 = new THREE.Mesh(cubeGeometry);
cube2.position.set(0, -25, 200);
cube.updateMatrix();
cube2.updateMatrix();

var singleGeometry = new THREE.Geometry();
singleGeometry.merge(cube.geometry, cube.matrix);
singleGeometry.merge(cube2.geometry, cube2.matrix);

var combinedMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true});
var mesh = new THREE.Mesh(singleGeometry, combinedMaterial);

var cubeGeometry = new THREE.CubeGeometry(200, 200, 200);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.8, transparent: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

scene.add(cube);
scene.add(mesh);

var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.z = 500;

var controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', render);


var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);

render();
animate();


function animate() {
  requestAnimationFrame( animate );
  controls.update();

}

function render() {
  renderer.render( scene, camera );
}

Three.js自我透明，对象不应该透视

0 个答案: