如何解决用作掩码的threejs和模板缓冲区
我无法让模板缓冲区与 Threejs 一起工作。有人可以向我解释我需要改变什么。
黄色平面用作遮罩,我们应该只看到与黄色平面重叠的绿色平面。
threejs 上的示例显示了用于剪切平面的模板缓冲区,这不是我所需要的。
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
var _renderer;
var _canvas;
var _camera;
var _scene;
function setupRender() {
_canvas = document.getElementById("mycanvas");
let context = _canvas.getContext("webgl",{ preserveDrawingBuffer: false });
window._r = _renderer = new THREE.Webglrenderer({
context: context,canvas: _canvas,stencil: true,premultipliedAlpha: false,});
_renderer.setPixelRatio(window.devicePixelRatio);
_renderer.autoClear = true;
_renderer.autoClearColor = true;
_renderer.autoClearDepth = true;
_renderer.autoClearStencil = true;
window.addEventListener('resize',onWindowResize);
}
function create() {
_camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);
_camera.position.z = 400;
_scene = new THREE.Scene();
createPlaneYellow();
createPlaneGreen();
onWindowResize();
}
function createPlaneYellow(){
const geometry = new THREE.PlaneGeometry( 100,100 );
const material = new THREE.MeshBasicMaterial( {
color: 0xffff00,side: THREE.DoubleSide,//colorWrite : false,depthWrite : false,depthTest :false,stencilWrite: true,stencilWriteMask: 0xff,// values gets AND with stencil buffer before write
// these 3 variable are used for glStenilFunc(func,ref,mask)
stencilFunc : THREE.AlwaysstencilFunc,// which fragments are passes or is discarded
stencilRef : 1,// value for the stencil test
stencilFuncMask: 0xff,// specifies a mask that is ANDed with both the reference value and the stored stencil value before the test compares them. Initially set to all 1s
// these 3 variables are used for glStencilOp(fail,zfail,zpass)
stencilFail: THREE.KeepStencilOp,// The stencil value is replaced with the reference value set with glStencilFunc
stencilZFail: THREE.KeepStencilOp,stencilZPass: THREE.ReplaceStencilOp
} );
const plane = new THREE.Mesh( geometry,material );
_scene.add( plane );
}
function createPlaneGreen(){
const geometry = new THREE.PlaneGeometry( 100,100 );
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,depthWrite : true,depthTest :true,// <---- don't think this is necessary when we are not writting here
stencilFunc : THREE.EqualStencilFunc,stencilRef: 0,stencilFuncMask: 0xff,stencilFail: THREE.KeepStencilOp,stencilZFail: THREE.KeepStencilOp,stencilZPass: THREE.KeepStencilOp
});
const plane = new THREE.Mesh( geometry,material );
plane.position.x = 50;
plane.position.y = -50;
_scene.add( plane );
}
function onWindowResize() {
_camera.aspect = window.innerWidth / window.innerHeight;
_camera.updateProjectionMatrix();
_renderer.setSize( window.innerWidth,window.innerHeight );
}
function update() {
requestAnimationFrame(update);
_renderer.render(_scene,_camera);
}
window.onload = () => {
setupRender();
create();
update();
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。