Three.js浮动字符串动画
Three.js浮动字符串动画
提问于 2021-12-19 22:51:08
我发这个帖子是为了找到一种实现效果的方法。我想画一个浮动线，与移动曲线和悬停交织。
一个例子将说明自己，最接近的例子是该站点主页上的项目时间表：https://victoiredouy.com/ --您也可以在加载栏和站点上的任何地方看到它。
我想要做的是定义一个点数组，其中的线必须通过，并让它随机浮动。
现在，我对Three.js和CatmullRomCurve3类进行了实验，这允许我设置强制点(参见下面的代码片段)。我在曲线上定义了6个点，很容易为一条更自然的直线定义一些其他点，但是仍然缺少一些东西：
animation
- Hover interraction
- line
- 随机慢浮动动画
有人知道如何改进我的片段吗？
(谢谢！)
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>
回答 1
Stack Overflow用户
发布于 2021-12-20 18:15:56
在这里扩展我的评论。
我在这些强制点中添加一个小范围，以使最终结果看起来是随机的，现在在传递给CatmullRomCurve3的数组中有6个点，但是您可以传递更完全的随机点，或者就像这些带范围的点一样，将直线保持在一定的边界内。
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>
我确实清理了您的代码以保持这个示例尽可能小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70415923
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号