gpt4 book ai didi

javascript - 仅显示重叠部分

转载 作者:行者123 更新时间:2023-11-28 15:29:42 24 4
gpt4 key购买 nike

我想这是基本的东西,但找不到任何解决方案。假设我有 2 个对象,并且只想显示它们的重叠部分(即它们的交集)。有什么提示吗?

最佳答案

一种方法是打开模板。绘制第一个对象,更新模板缓冲区,然后使用模板测试集绘制第二个对象,以仅在第一个对象设置模板缓冲区的位置绘制。

var camera, scene1, scene2, scene3, renderer, container;
var mesh1, mesh2, mesh3, mesh4;

init();
animate();

function init() {

container = document.body;
renderer = new THREE.WebGLRenderer();
renderer.setSize( container.clientWidth, container.clientHeight );
container.appendChild( renderer.domElement );
renderer.autoClear = false;

//

camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight, 1, 1000 );
camera.position.z = 400;

// we have to make 2 scenes AFAICT because three has no way to render portions
// of scene. I suppose we could hide one object, render, the hide the other object and un hide
// the first. Or we could remove objects from the scene and add them back.
scene1 = new THREE.Scene();
scene2 = new THREE.Scene();

var geometry1 = new THREE.BoxGeometry( 200, 200, 200 );
var geometry2 = new THREE.IcosahedronGeometry ( 200, 0 );

var material1 = new THREE.MeshBasicMaterial( { color: 0xFF8040 } );
var material2 = new THREE.MeshBasicMaterial( { color: 0x8080FF, wireframe: true } );

// put the box in scene1
mesh1 = new THREE.Mesh( geometry1, material1 );
mesh1.position.x = -75;
scene1.add( mesh1 );

// put the icoahedron in scene2
mesh2 = new THREE.Mesh( geometry2, material1 );
mesh2.position.x = 75;
scene2.add( mesh2 );

// just for visualization lets draw a 3rd scene with both objects so we can
// where they would be if drawn
scene3 = new THREE.Scene();
mesh3 = new THREE.Mesh( geometry1, material2 );
scene3.add( mesh3 );

// put the icoahedron in scene2
mesh4 = new THREE.Mesh( geometry2, material2 );
scene3.add( mesh4 );

}


function animate() {

mesh1.rotation.x += 0.005;
mesh1.rotation.y += 0.01;

mesh2.rotation.x -= 0.003;
mesh2.rotation.y -= 0.007;

// Clear color, depth, and stencil
renderer.clear(true, true, true);

// Turn on stenciling, Set it up so that as we draw scene1 it will put
// a 1 in the stencil for ever pixel drawn
var gl = renderer.context;
gl.enable(gl.STENCIL_TEST);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xFF);

// renderer scene1
renderer.render( scene1, camera );

// Clear the color and depth but NOT the stencil
renderer.clear(true, true, false);

// Set the stencil up so we'll only draw if there's a 1 in the stencil buffer.
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);// sfail, spassdfail, spassdepthpass);
gl.stencilFunc(gl.EQUAL, 1, 0xFF); //func, ref, mask)

// renderer scene2
renderer.render( scene2, camera );

// this part is just so we can see both shapes since it's hard to see otherwise
gl.disable(gl.STENCIL_TEST);
mesh3.position.x = mesh1.position.x;
mesh3.rotation.x = mesh1.rotation.x;
mesh3.rotation.y = mesh1.rotation.y;
mesh4.position.x = mesh2.position.x;
mesh4.rotation.x = mesh2.rotation.x;
mesh4.rotation.y = mesh2.rotation.y;

renderer.render( scene3, camera );

requestAnimationFrame( animate );
}
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

嗯,这实际上只适用于 2D,不适用于 3D(交集在 2D 中)。卫生部!

关于javascript - 仅显示重叠部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27828434/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com