ThreeJS教程:模型或标签淡入淡出
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生
模型或标签淡入淡出
如果你想实现一个模型或标签的淡入淡出效果,可以同过tweenjs控制模型或标签的透明度轻松实现。
Tweenjs回调函数
twwenjs库提供了onStart
、onUpdate
、onComplete
等用于控制动画执行的回调函数。
onStart
:动画开始执行触发onUpdate
:动画执行过程中,一直被调用执行onComplete
:动画正常执行完触发
.onUpdate(function(obj){})
结构中,obj对应的是new TWEEN.Tween(pos)
的参数对象pos。
const tween = new TWEEN.Tween(pos).to({x: 0}, 4000)
// 开始执行:动画片段tween开始执行的时候触发onStart
.onStart(function(obj){
...
})
模型淡入
// 模型淡入
material.transparent = true;//开启透明计算
material.opacity = 0.0;//完全透明
// new TWEEN.Tween(material)
new TWEEN.Tween({opacity:material.opacity})
.to({opacity:1.0}, 3000)
.onUpdate(function(obj){
material.opacity = obj.opacity
})
.onComplete(function(){
//动画结束:关闭允许透明,恢复到模型原来状态
material.transparent = false;
})
.start();
模型淡出
// 模型淡出
// new TWEEN.Tween(material)
new TWEEN.Tween({opacity:material.opacity})
.to({opacity:0.0}, 3000)
.onStart(function(){
//动画开始:允许透明opacity属性才能生效
material.transparent = true;
})
.onUpdate(function(obj){
material.opacity = obj.opacity
})
.start();
模型HTML标签淡入淡出
three.js三维场景中的HTML元素标签淡入淡出和mesh对象淡入淡出类似操作。
单击模型弹出的标签淡入,而不是突然出现。
// HTML元素标签
const divTag = document.getElementById('tag');
const intersects = raycaster.intersectObjects(cunchu.children);
console.log('intersects', intersects);
if (intersects.length > 0) {
// 通过.ancestors属性判断那个模型对象被选中了
outlinePass.selectedObjects = [intersects[0].object.ancestors];
//tag会标注在intersects[0].object.ancestors模型的局部坐标系原点位置
intersects[0].object.ancestors.add(tag);
span.innerHTML = intersects[0].object.ancestors.name; //修改标签数据
// 标签淡出
new TWEEN.Tween({opacity:0})
.to({opacity:1.0}, 1000)
.onUpdate(function(obj){
//动态更新div元素透明度
divTag.style.opacity = obj.opacity;
})
.start();
}
原来代码,单击按钮,直接关闭标签。
// 鼠标单击按钮,关闭HTML标签
document.getElementById('close').addEventListener('click', function () {
if (chooseObj) { //把原来选中模型对应的标签和发光描边隐藏
outlinePass.selectedObjects = []; //无发光描边
chooseObj.remove(tag); //从场景移除
}
})
关闭模型标签淡出,逐渐消失。
// 鼠标单击按钮,关闭HTML标签
document.getElementById('close').addEventListener('click', function () {
if (chooseObj) { //把原来选中模型对应的标签和发光描边隐藏
outlinePass.selectedObjects = []; //无发光描边
// chooseObj.remove(tag); //从场景移除
new TWEEN.Tween({opacity: 1})
.to({opacity: 0}, 400)
.onUpdate(function (obj) {
//动态更新div元素透明度
divTag.style.opacity = obj.opacity;
})
.onComplete(function(){
// 动画结束再从场景中移除标签
chooseObj.remove(tag); //从场景移除
})
.start();
}
})
上一篇:ThreeJS教程:缓动算法.easing(地球渐入相机动画) (mvrlink.com)
下一篇: