javascript - 如何补间/动画雾three.js
问题描述
所以我试图通过补间来改变雾密度这是可能的,因为它似乎没有改变这是我的默认值:
var camera, densityFog, colorFog2;
colorFog2 = 0xfee2ed;
densityFog = 0.25;
scene.fog = new THREE.FogExp2(colorFog2, densityFog);
这是我使用库 GSAP 和 tweenjs 尝试过的:
tween = new TWEEN.Tween(scene.fog)
.to({densityFog: 0.02}, 1000 )
.easing(TWEEN.Easing.Exponential.InOut)
.onComplete(function() { }).start();
gsap.to(scene.fog, {
duration: 2,
densityFog: 0.02,
onUpdate: function () {
controls.update();
isZoomed = 0;
controls.enabled = false;
},
});
谁能指出我正确的方向?
解决方案
这个答案使用gsap
使用一个对象,例如。myfog = { value: .5 }
并将其value
属性调整为您想要的。
然后在 中,以电流为参数onUpdate
设置scene.fog
为a。new THREE.FogExp2
myfog.value
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.position.y = 2;
// Init the object and fog here
var myfog = { value: .5 }
scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);
var geometry = new THREE.BoxGeometry(1, 1, 5);
var mat = new THREE.MeshBasicMaterial({
color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, mat);
scene.add(mesh);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00ff00);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
render();
}
animate();
// This animates the fog
gsap.to(myfog, {
duration: 2,
value: 0.002, // The end value
onUpdate: function() {
// New fog with current myfog value
scene.fog = new THREE.FogExp2(0x00ff00, myfog.value);
},
// These just infinitely repeat the animation
yoyo: true,
repeat: -1,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>
推荐阅读
- python - 如何对数据框中的每一列进行排名(百分比)?
- javascript - 如何在使用 jQuery 的按钮点击时切换到不同的 python 函数?
- python - Django REST 查询:检索用户
- opencv - 生成具有相同感知亮度和饱和度的颜色
- java - 测试前执行jar文件
- c# - 如何通过 Kerberos 委派进行 LDAP 查询
- r - 将名称添加到 r 中的第一列
- express - Express.js 是否像 node.js 中那样具有 execSync
- java - 从 ZonedDateTime 对象获取该月的最后一天
- java - 如何使用 Mockito 模拟 DynamoDB 映射器加载函数?