three+webgl实现鼠标可交互的三维 Vortex粒子系统代码
代码语言:html
所属分类:粒子
代码描述:three+webgl实现鼠标可交互的三维 Vortex粒子系统代码
代码标签: three webgl 鼠标 交互 三维 Vortex 粒子 系统 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
</head>
<body translate="no">
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#canvas-container {
width: 100vw;
height: 100vh;
}
</style>
<div id="canvas-container"></div>
<script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.162.0/three.module.min.js",
"OrbitControls": "https://unpkg.com/three@0.162.0/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';
let scene, camera, renderer, vortex, controls;
let particles, particleSystem;
let time = 0;
let mouse = new THREE.Vector2();
let mouseVelocity = new THREE.Vector2();
let lastMousePos = new THREE.Vector2();
let audioContext, analyser;
let forceField = [];
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.getElementById('canvas-container').appendChild(renderer.domElement);
camera.position.set(30, 20, 50);
camera.lookAt(0, 0, 0);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 20;
controls.maxDistance = 150;
controls.enableRotate = true;
vortex = new THREE.Group();
scene.add(vortex);
for (let i = 0; i < 10; i++) {
forceField.push({
position: new THREE.Vector3(
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40
),
strength: Math.random() * 2 + 1,
frequency: Math.random() * 2 + 1
});
}
}
function createVortex() {
const particleCount = 200000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const sizes = new Float32Array(particleCount);
const ringIndices = new Float32Array(particleCount);
const particleTypes = new Float32Array(particleCount);
const ringCount = 15;
const particlesPerRing = particleCount / ringCount;
for (let i = 0; i < particleCount; i++) {
const ringIndex = Math.floor(i / particlesPerRing);
const particleType = Math.random() > 0.8 ? 1 : 0;
const .........完整代码请登录后点击上方下载按钮下载查看
网友评论0