【发布时间】：2015-08-28 22:53:23
【问题描述】：
在 Three.js 的第 53 版中，我可以使用着色器材质在一个几何体中用另一个几何体伪造一个洞
vertex:void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
和
fragment:void main() {
gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0); //alpha is zero
}
我可以通过“洞”窥视并看到后面的物体。从第 54 版开始，我只看到内部物体是白色的，我不能再窥视了。 我怎样才能让它再次工作？
我的完整样本：
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometry - cube</title>
<meta charset="utf-8">
<style>
body {
margin: 0px;
background-color: #DDFFDD;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/old/three_53.js"></script>
<script src="../build/old/controls/TrackballControls_53.js"></script>
<script>
var camera, scene, renderer, controls, pointLight;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x505050 ) );
pointLight = new THREE.PointLight(0xFFFFFF, 0.9);
scene.add(pointLight);
var mainGroup = new THREE.Object3D();
var geometry = new THREE.CubeGeometry( 100, 100, 10 );
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xaaaaaa } ) );
//mesh.renderOrder = 2;
var geometry2 = new THREE.CubeGeometry( 50, 50, 11 );
var material2 = new THREE.ShaderMaterial({vertexShader:'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}', fragmentShader:'void main() { gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0);}'});
var innerGroup = new THREE.Object3D();
var mesh2 = new THREE.Mesh( geometry2, material2 );
//mesh2.renderOrder = 1;
mainGroup.add( mesh );
innerGroup.add(mesh2);
mainGroup.add( innerGroup );
//
var geometry3 = new THREE.SphereGeometry( 50);
var mesh3 = new THREE.Mesh( geometry3, new THREE.MeshLambertMaterial( { color: 0x00ff00 } ) );
mesh3.position.z = -200;
//mesh2.renderOrder = 3;
mainGroup.add( mesh3 );
scene.add(mainGroup);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
pointLight.position.set(camera.position.x, camera.position.y, camera.position.z);
renderer.render( scene, camera );
}
</script>
</body>
仅当带有着色器材质的“洞对象”在一个组中时才有效。
【问题讨论】：
标签： three.js