THREEJS - 模型的裁切消隐

在项目应用中，有时候会存在需要模型外表慢慢褪去的效果，就像裁切一样的，如下图所示：

看上去效果很炫酷，实际上实现起来并不复杂，下面给大家详细介绍一下：
1. 开启场景的渲染通道，此功能较消耗性能，所以可以根据实际需要使用。

renderer.clippingPlanes = Object.freeze([]);
renderer.localClippingEnabled = true;

2. 优先定义基础变量，这里的localPlane1，是调整法向量的方向值，现在我们定义的是模型Y轴方向的变化，所以向量值定义的Y轴，也可以根据自己的需要调整轴向变化，第二个参数的数值，一定要大于模型的高度（或者X轴Z轴的长度，根据选定的轴确定）。

let localPlane1 = new THREE.Plane(new THREE.Vector3(0, -1, 0), 200);
let step = 2;
let clippingPlanesStatus = false; // 避免一直render渲染

3. 设置模型material的clippingPlanes值。

const geometry = new THREE.BoxGeometry(100, 200, 100);
const material = new THREE.MeshBasicMaterial({ color: 0x333333 });
const box = new THREE.Mesh(geometry, material);box.material.clippingPlanes = [localPlane1];

4. 在render中，对localPlane1的值进行修改，即可看到模型出现裁切的功能。（这里用clippingPlanesStatus状态来判断，是避免一直渲染计算，修改step的数值，实现上下切面的功能，向下切的时候step的值为2，向上还原的时候step的数值为-2，根据实际情况可进行调整）

function animate() {requestAnimationFrame(animate);if (clippingPlanesStatus) {localPlane1.constant -= step;if (localPlane1.constant <= -1 || localPlane1.constant >= 101) {clippingPlanesStatus = false;}}
}
animate();

以上就是利用clippingPlanes实现模型裁切的功能点。

欢迎各位大佬指导！！！互相学习！！！

THREEJS - 模型的裁切消隐相关推荐

threejs模型点击选中
threejs模型点击选中 /*** 射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()* 选中的网格模型变为半透明效果* ** */function choose(eve ...
THREEJS - 模型居中
在使用THREEJS的过程中,我们常常会遇到关于模型的处理,有时候建模的同事会帮我们将模型归零后给我们,有时候是没有归零的,但这时候需要将模型在场景中居中展示. 这里采用的办法是包围盒的方式,具体代码 ...
threejs模型可视化编辑器_一个近乎无门槛、零基础的3D场景编辑器
在这个大数据井喷.互联网爆炸的时代,如何抓住机遇.如何逆流而上或是站在浪潮顶峰?在BAT崛起之初,貌似很少有人选择走BAT当时的道路,那时的他们,选择的是逆流而上,当所有人都在搞实体经营,阿里选择了做 ...
THREEJS - 模型的任意视角展示
上一篇博客我们提到了任意模型加载的居中的解决办法,但是呢,细心的同学会发现,模型虽然居中了,但是模型的大小我们比较难以控制,可能会导致模型加载时,展示在场景中或大或小,这时候我们就需要设定一下模型的展 ...
threejs模型可视化编辑器_加油！所见即所得的H5页面可视化编辑器H5-Dooring
最近总结一下笔者目前开发的h5在线编辑器H5-Dooring. 目前已经在github上开源免费使用. 目前市面上也有很多优秀的H5在线编辑器, 也很强大, 笔者将从几个维度来介绍H5-Dooring ...
threejs 模型隐藏后不显示_教师资格证面试报名后显示“待审核”？不做这一步报名白费！...
19下教师资格证面试报名正在进行中,小可爱们都成功报名了吗? 这两天派派为大家回答问题的时候发现很多小可爱被卡在了"待审核"这一步,今天派派就跟大家聊聊"现场审核&quo ...
THREEJS 模型调整旋转中心
model.traverse(child => {if (child.isMesh) {let center = new THREE.Box3().setFromObject(child).ge ...
threejs 模型中指定材质更换为视频贴图
使用的核心代码: let video = document.createElement('video');video.src = "js/sintel.mp4"; // 设置视频地 ...
threejs知识点：1.模型分析
合作qq:(550891796) =================================== 实例源码: http://download.csdn.net/download/zzjzmdx ...

THREEJS - 模型的裁切消隐

THREEJS - 模型的裁切消隐相关推荐

最新文章

热门文章