首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在glsl和三个js中将粒子推离鼠标位置

基础概念

GLSL(OpenGL Shading Language)是一种用于编写着色器程序的高级着色语言,主要用于图形渲染。着色器是运行在GPU上的小程序,用于处理图形渲染过程中的各个阶段,如顶点着色器和片段着色器。

Three.js是一个基于WebGL的JavaScript库,用于在浏览器中创建和显示3D图形。它简化了WebGL的复杂性,使得开发者可以更容易地创建复杂的3D场景和动画。

相关优势

  • GLSL:直接运行在GPU上,处理速度快,适合实时图形渲染。
  • Three.js:简化了WebGL的开发过程,提供了丰富的3D对象和材质,便于快速开发3D应用。

类型

  • 顶点着色器:处理顶点数据,如位置、法线等。
  • 片段着色器:处理像素级别的渲染,如颜色、纹理等。

应用场景

  • 游戏开发:用于实现粒子效果、光影效果等。
  • 数据可视化:用于创建动态的3D图表和数据展示。
  • 虚拟现实和增强现实:用于创建沉浸式的3D环境。

实现粒子推离鼠标位置

以下是一个简单的示例,展示如何在Three.js中使用GLSL着色器将粒子推离鼠标位置。

HTML部分

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particle Push Away from Mouse</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>

JavaScript部分(app.js)

代码语言:txt
复制
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建粒子系统
const particleCount = 1000;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 10;
}
particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const particleMaterial = new THREE.ShaderMaterial({
    uniforms: {
        mousePos: { value: new THREE.Vector2(0, 0) }
    },
    vertexShader: `
        uniform vec2 mousePos;
        void main() {
            vec3 pos = position;
            float distance = length(mousePos - (pos.xy * 2.0 - 1.0));
            pos.z += distance * 0.1;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        }
    `,
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    `
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

camera.position.z = 5;

// 监听鼠标移动事件
const mouse = new THREE.Vector2();
window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    particleMaterial.uniforms.mousePos.value.copy(mouse);
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

解释

  1. HTML部分:创建一个基本的HTML页面,引入Three.js库和自定义的JavaScript文件。
  2. JavaScript部分
    • 创建场景、相机和渲染器。
    • 生成粒子系统,随机初始化粒子的位置。
    • 使用自定义的着色器材料(ShaderMaterial),其中包含顶点着色器和片段着色器。
    • 在顶点着色器中,计算每个粒子与鼠标位置的距离,并根据距离调整粒子的Z坐标,使其推离鼠标位置。
    • 监听鼠标移动事件,更新着色器中的鼠标位置。
    • 启动渲染循环,不断渲染场景。

参考链接

通过这种方式,你可以实现一个简单的粒子系统,使粒子推离鼠标位置,适用于各种需要动态交互效果的场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券