1. 首页
  2. three.js

three.js剪裁平面API未正确应用

我正试图借助本例裁剪平面4中使用的裁剪平面API进行裁剪。n我对代码进行了更改,但它不起作用。我确信我在着色器和init()中遗漏了一些内容。尝试本地和全局,但都不起作用。n我不确定是否要进行更改或添加一些内容,以便开始剪辑。n以下是完整的代码。我正在使用代码http://www.lebarba.com/4nfunction init() {//Parameters that can = = = = = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, = = = new THREE.Plane( new THREE.Vector3( – 1, 0, 0 ), 0.1 = new = new THREE.Mesh( boxGeometry, materialSecondPass );sceneFirstPass.add( meshFirstPass );sceneSecondPass.add( meshSecondPass );// ***** Clipping setup (renderer): = Empty; // GUI sets it = \”0px\”;container.appendChild( stats.domElement = gui.addFolder(\”Step = step2Folder.addColor(guiControls, = step3Folder.add(guiControls, \”stepPos3\”, 0.0, = !== Empty; },set \”Enabled\”( = = = = = = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();stats.update();}function render() = 887;//Acts like a texture3D using Z slices and trilinear filtering.vec4 sampleAs3DTexture( vec3 texCoord ){vec4 colorSlice1, colorSlice2;vec2 texCoordSlice1, texCoordSlice2;//The z coordinate determines which Z slice we have to look for.//Z slice number goes from 0 to = += (mod(zSliceNumber1, 16.0 ) / 16.0);texCoordSlice1.y += floor((255.0 – zSliceNumber1) / 16.0) / 16.0;texCoordSlice2.x += (mod(zSliceNumber2, 16.0 ) / 16.0);texCoordSlice2.y += floor((255.0 – zSliceNumber2) / 16.0) / 16.0;//Get the opacity value from the 2D texture.//Bilinear filtering is done at each texture2D = texture2D( transferTex, vec2( colorSlice2.a, 1.0) ).rgb;//How distant is zSlice1 to ZSlice2. Used to interpolate between one Z slice and the = worldSpaceCoords;//Using NearestFilter for rtTexture mostly eliminates bad backPos values at the edges//of the cube, but there may still be no valid backPos value for the current fragment.if ((backPos.x == 0.0) && (backPos.y == = backPos – = length(deltaDirection);//Start the ray casting from the front = 0.0;//If we have twice as many samples, we only need ~1/2 the alpha per sample.//Scaling by 256/10 just happens to give a good value for the alphaCorrection = colorSample.a * alphaCorrection;//Applying this effect to both the color and alpha accumulation results in more realistic transparency.alphaSample += colorSample * alphaSample;//Store the alpha accumulated so far.accumulatedAlpha += alphaSample;//Advance the ray.currentPosition += deltaDirection;accumulatedLength += deltaDirectionLength;//If the length traversed is more than the ray length, or if the alpha accumulated reaches 1.0 then =projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}n您的着色器不包括剪切所需的着色器块。从API来看,这并不明显,但剪裁实际上是在着色器中定义的。n感谢您指出这一点。我到底需要在哪里包括ShaderChunk?你能帮我做这个吗?抱歉,我对这三个js是新手。n只需检查在附带的着色器中是如何完成的:ngithub.commrdoob/three.js/blob/aaf5534515ecac5269978dca27d135ce7195065be/src/renders/shaders/ShaderLib/meshbasic_vert.glsl.js5nexport default /* glsl */#include #include #include #include #include #include #include #include #include #include void main() {#include #include #include #include #ifdef USE_ENVMAP此文件已被截断。显示原始ngithub.commrdoob/three.js/blob/aaf5534515ecac5269978dca27d135ce7195065be/src/renders/shaders/ShaderLib/meshbasic_frag.glsl.js3n*export default /* glsl */uniform vec3 diffuse;uniform float opacity;#ifndef FLAT_SHADEDvarying vec3 vNormal;#endif#include #include #include #include #include

#include #include #include #include #include 此文件已被截断。显示原始n块:ngithub.commrdoob/three.js/blob/aaf5534515ecac526978dca27d135ce7195065be/src/renders/shaders/ShaderChunk/clipping_planes_fragment.glsl.js2n*export default /* glsl */#if NUM_CLIPPING_PLANES > 0vec4 plane;#pragma unroll_loopfor ( = UNION_CLIPPING_PLANES; i 0#if ! defined( STANDARD ) && ! defined( PHONG ) && ! defined( MATCAP )varying vec3 vViewPosition;#endifuniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ];#endif;ngithub.commrdoob/three.js/blob/aaf5534515ecac526978dca27d135ce7195065be/src/renders/shaders/ShaderChunk/clipping_planes\\u par_vertex.glsl.jsnexport default /* glsl */#if NUM_CLIPPING_PLANES > 0 && ! defined( STANDARD ) && ! defined( PHONG ) && ! defined( MATCAP )varying vec3 vViewPosition;#endif;ngithub.commrdoob/three.js/blob/aaf5534515ecac526978dca27d135ce7195065be/src/renders/shaders/ShaderChunk/clipping_planes_vertex.glsl.js2n导出默认值/*glsl*/#if NUM_CLIPPING_PLANES>;0&!定义(标准)&!已定义(电话)&;&!已定义(MATCAP>n Clipping Plane API is not applied properlyn

three.js剪裁平面API未正确应用 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e5%89%aa%e8%a3%81%e5%b9%b3%e9%9d%a2api%e6%9c%aa%e6%ad%a3%e7%a1%ae%e5%ba%94%e7%94%a8/