Three.js浮动字符串动画

我发布这篇文章是为了找到实现效果的方法。我想画一条浮动线，带有移动曲线和悬停交互。

一个例子不言自明，最接近的例子是本网站主页上的项目时间表：https://victoiredouy.com/你也可以在加载栏和网站上的任何地方看到它

我想做的是定义一个线必须经过的点数组，并让它随机浮动。

目前，我在Three.js和CatmullRomCurve3类中进行了实验，这允许我设置强制点(请参阅下面的代码片段(。我在曲线上定义了6个点，为一条更自然的线定义一些其他点会很容易，但仍然缺少一些东西：

随机慢速浮动动画
悬停交互
线条绘制动画

有人知道如何改进我的代码片段吗？

谢谢！：(

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 0 );
document.body.appendChild( renderer.domElement );
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
const scene = new THREE.Scene();

const getPosFromPX = (x, y) => {
const vec = new THREE.Vector3();
const pos = new THREE.Vector3();
vec.set(
( x / window.innerWidth ) * 2 - 1,
- ( y / window.innerHeight ) * 2 + 1,
0.5 );
vec.unproject( camera );
vec.sub( camera.position ).normalize();
const distance = - camera.position.z / vec.z;
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
return pos
}
const getLine = () => {
const curve = new THREE.CatmullRomCurve3( [
getPosFromPX(10, 50),
getPosFromPX(document.body.clientWidth - 50, 50),
getPosFromPX(document.body.clientWidth - 10, document.body.clientHeight / 2),
getPosFromPX(50,document.body.clientHeight / 2),
getPosFromPX(50,document.body.clientHeight -60),
getPosFromPX(document.body.clientWidth - 50, document.body.clientHeight - 70)
] );
const points = curve.getPoints( 80 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color : "#000000" } );
return new THREE.Line( geometry, material );
}
scene.add(getLine());
renderer.render( scene, camera );

<!DOCTYPE html>
<html>
<body>
<script src="https://threejs.org/build/three.js"></script>
</body>
</html>

在这里扩展我的评论。。。

我在这些强制点上添加了一个小范围，以使最终结果看起来是随机的，现在你在传递给CatmullRomCurve3的数组中有六个点，但你可以更完全随机地传递，或者像这些具有一定范围的点一样，将线保持在特定的边界内。

function rand(min, max) {
return Math.random() * (max - min) + min;
}
function getLine() {
const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-37 + rand(-8, 8),  20 + rand(-8, 8), 0),
new THREE.Vector3( 20 + rand(-8, 8),  20 + rand(-8, 8), 0),
new THREE.Vector3( 37 + rand(-8, 8),   0 + rand(-8, 8), 0),
new THREE.Vector3(-20 + rand(-8, 8),   0 + rand(-8, 8), 0),
new THREE.Vector3(-20 + rand(-8, 8), -16 + rand(-8, 8), 0),
new THREE.Vector3( 20 + rand(-8, 8), -12 + rand(-8, 8), 0)
]);
const points = curve.getPoints(80);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: "#000000" });
return new THREE.Line(geometry, material);
}
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(200, 200);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(45, 1, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
scene.add(getLine());
renderer.render(scene, camera);

<script src="https://threejs.org/build/three.js"></script>

我确实清理了你的代码，以保持这个样本尽可能小的

相关内容

最新更新

热门标签：