三.js 浮动字符串动画答案

【问题标题】：Three.js floating string animation三.js 浮动字符串动画
【发布时间】：2022-01-21 17:20:15
【问题描述】：

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

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

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

目前，我使用 Three.js 和 CatmullRomCurve3 类对其进行了试验，它允许我设置强制点（参见下面的代码 sn-p）。我在曲线上定义了 6 个点，并且为更自然的线定义一些其他点很容易，但是仍然缺少一些东西：

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

有人知道如何提高我的 sn-p 吗？

谢谢！ :)

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>

【问题讨论】：

你的代码中没有随机的东西你到底在找什么？这里有如何使用随机的示例：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@HelderSepulveda 是的，现在没有什么随机的。我希望线通过一些永远不会移动的“强制点”（我在 CatmullRomCurve3 中定义的点），并让线在这些点之间随机浮动
为什么这些积分是强制性的？我觉得最简单的方法是对这些点进行一些随机化，例如你有起点 (10, 50) 为什么不添加一些随机值呢？ [ -8 to 8 ] 范围内的任何内容都会使它有点随机，您也可以在对您来说是“强制性”的点之间插入一些随机点

标签： css animation canvas three.js line

【解决方案1】：

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

我在这些强制点上添加了一个小范围，以使最终结果看起来是随机的，现在您在传递给 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);

&lt;script src="https://threejs.org/build/three.js"&gt;&lt;/script&gt;

我确实清理了您的代码以使此示例尽可能小

【讨论】：