所以我試圖在three.js中制作一個Boxgeometry浮動，我嘗試用setTimeout來做但它沒有用，這是我嘗試的。
function animate() {
requestAnimationFrame( animate );
cube.position.y = 0.01
setTimeout(function(){
cube.position.y = -0.02
}, 10000);
renderer.render( scene, camera );
}
它只會上下移動，看起來不像是漂浮的。
如何為立方體制作浮動影片？
uj5u.com熱心網友回復：
通過使用三角函式，sin()您可以實作基本的浮動效果。
let camera, scene, renderer;
let clock, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
clock = new THREE.Clock();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
const time = clock.getElapsedTime();
mesh.position.y = Math.cos( time ) * 0.2;
renderer.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>根據您如何引數化計算以及如何組合三角函式，您可以實作完全不同的影片。
還可以考慮使用 GSAP 或 Tween.js 之類的影片庫來輕松訪問各種緩動功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342856.html
標籤：javascript 动画片 三.js
上一篇：PowerShell-從CSV轉換為XML并更新XML記錄
下一篇：沒有css的SVG影片