three完全开源扩展案例02-跳动的音乐

在这里插入图片描述
更多案例尽在https://threelab.cn/

演示地址

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";let mediaElement;
let analyser;
let scene;
let camera;
let renderer;
let controls;
let mesh;const fftSize = 4096;
const clock = new THREE.Clock();
const uniform = {uTime: { value: 0 },tAudioData: { value: 0 },uStrength: { value: 0 },
};
const box = document.getElementById("box");const init = () => {// Scenescene = new THREE.Scene();const material = new THREE.MeshStandardMaterial();material.roughness = 0.7;const depthMaterial = new THREE.MeshDepthMaterial({depthPacking: THREE.RGBADepthPacking,});material.onBeforeCompile = (shader) => {shader.uniforms.uTime = uniform.uTime;shader.uniforms.uStrength = uniform.uStrength;shader.vertexShader = shader.vertexShader.replace("#include <common>",`#include <common>attribute float aOffset;varying vec2 vUv;uniform float uTime;uniform float uStrength;//	Simplex 4D Noise//	by Ian McEwan, Ashima Arts//vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}vec4 grad4(float j, vec4 ip){const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);vec4 p,s;p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;p.w = 1.5 - dot(abs(p.xyz), ones.xyz);s = vec4(lessThan(p, vec4(0.0)));p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;return p;}float simplexNoise4d(vec4 v){const vec2  C = vec2( 0.138196601125010504,  // (5 - sqrt(5))/20  G40.309016994374947451); // (sqrt(5) - 1)/4   F4// First cornervec4 i  = floor(v + dot(v, C.yyyy) );vec4 x0 = v -   i + dot(i, C.xxxx);// Other corners// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)vec4 i0;vec3 isX = step( x0.yzw, x0.xxx );vec3 isYZ = step( x0.zww, x0.yyz );//  i0.x = dot( isX, vec3( 1.0 ) );i0.x = isX.x + isX.y + isX.z;i0.yzw = 1.0 - isX;//  i0.y += dot( isYZ.xy, vec2( 1.0 ) );i0.y += isYZ.x + isYZ.y;i0.zw += 1.0 - isYZ.xy;i0.z += isYZ.z;i0.w += 1.0 - isYZ.z;// i0 now contains the unique values 0,1,2,3 in each channelvec4 i3 = clamp( i0, 0.0, 1.0 );vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );//  x0 = x0 - 0.0 + 0.0 * Cvec4 x1 = x0 - i1 + 1.0 * C.xxxx;vec4 x2 = x0 - i2 + 2.0 * C.xxxx;vec4 x3 = x0 - i3 + 3.0 * C.xxxx;vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;// Permutationsi = mod(i, 289.0);float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);vec4 j1 = permute( permute( permute( permute (i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));// Gradients// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)// 7*7*6 = 294, which is close to the ring size 17*17 = 289.vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;vec4 p0 = grad4(j0,   ip);vec4 p1 = grad4(j1.x, ip);vec4 p2 = grad4(j1.y, ip);vec4 p3 = grad4(j1.z, ip);vec4 p4 = grad4(j1.w, ip);// Normalise gradientsvec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));p0 *= norm.x;p1 *= norm.y;p2 *= norm.z;p3 *= norm.w;p4 *= taylorInvSqrt(dot(p4,p4));// Mix contributions from the five cornersvec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);m0 = m0 * m0;m1 = m1 * m1;return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;}`);shader.vertexShader = shader.vertexShader.replace("#include <fog_vertex>",`#include <fog_vertex>vec3 newPos = position;float strength = uStrength;newPos += normal * simplexNoise4d(vec4(position, uTime)) * strength;gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);`);shader.fragmentShader = shader.fragmentShader.replace("#include <common>",`#include <common>uniform float uTime;uniform float uStrength;`);shader.fragmentShader = shader.fragmentShader.replace("#include <opaque_fragment>",`#include <opaque_fragment>gl_FragColor = vec4(vNormal, 1.);`);};depthMaterial.onBeforeCompile = (shader) => {shader.uniforms.uTime = uniform.uTime;shader.uniforms.uStrength = uniform.uStrength;shader.vertexShader = shader.vertexShader.replace("#include <common>",`#include <common>attribute float aOffset;varying vec2 vUv;uniform float uTime;uniform float uStrength;//	Simplex 4D Noise//	by Ian McEwan, Ashima Arts//vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}vec4 grad4(float j, vec4 ip){const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);vec4 p,s;p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;p.w = 1.5 - dot(abs(p.xyz), ones.xyz);s = vec4(lessThan(p, vec4(0.0)));p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;return p;}float simplexNoise4d(vec4 v){const vec2  C = vec2( 0.138196601125010504,  // (5 - sqrt(5))/20  G40.309016994374947451); // (sqrt(5) - 1)/4   F4// First cornervec4 i  = floor(v + dot(v, C.yyyy) );vec4 x0 = v -   i + dot(i, C.xxxx);// Other corners// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)vec4 i0;vec3 isX = step( x0.yzw, x0.xxx );vec3 isYZ = step( x0.zww, x0.yyz );//  i0.x = dot( isX, vec3( 1.0 ) );i0.x = isX.x + isX.y + isX.z;i0.yzw = 1.0 - isX;//  i0.y += dot( isYZ.xy, vec2( 1.0 ) );i0.y += isYZ.x + isYZ.y;i0.zw += 1.0 - isYZ.xy;i0.z += isYZ.z;i0.w += 1.0 - isYZ.z;// i0 now contains the unique values 0,1,2,3 in each channelvec4 i3 = clamp( i0, 0.0, 1.0 );vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );//  x0 = x0 - 0.0 + 0.0 * Cvec4 x1 = x0 - i1 + 1.0 * C.xxxx;vec4 x2 = x0 - i2 + 2.0 * C.xxxx;vec4 x3 = x0 - i3 + 3.0 * C.xxxx;vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;// Permutationsi = mod(i, 289.0);float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);vec4 j1 = permute( permute( permute( permute (i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));// Gradients// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)// 7*7*6 = 294, which is close to the ring size 17*17 = 289.vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;vec4 p0 = grad4(j0,   ip);vec4 p1 = grad4(j1.x, ip);vec4 p2 = grad4(j1.y, ip);vec4 p3 = grad4(j1.z, ip);vec4 p4 = grad4(j1.w, ip);// Normalise gradientsvec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));p0 *= norm.x;p1 *= norm.y;p2 *= norm.z;p3 *= norm.w;p4 *= taylorInvSqrt(dot(p4,p4));// Mix contributions from the five cornersvec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);m0 = m0 * m0;m1 = m1 * m1;return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;}`);shader.vertexShader = shader.vertexShader.replace("#include <clipping_planes_vertex>",`#include <clipping_planes_vertex>vec3 newPos = position;float strength = uStrength;newPos += normal * simplexNoise4d(vec4(position, uTime)) * strength;gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);`);};// const geometry = new THREE.SphereGeometry(0.5, 256, 256);const geometry = new THREE.IcosahedronGeometry(2.5, 50);mesh = new THREE.Mesh(geometry, material);mesh.customDepthMaterial = depthMaterial;mesh.castShadow = true;scene.add(mesh);const plane = new THREE.Mesh(new THREE.PlaneGeometry(25, 25),new THREE.MeshStandardMaterial());plane.rotation.x = -Math.PI * 0.5;plane.position.y = -5;plane.receiveShadow = true;scene.add(plane);/*** Lights*/const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight("#ffffff", 0.3);directionalLight.castShadow = true;directionalLight.shadow.mapSize.set(1024, 1024);directionalLight.shadow.camera.far = 40;directionalLight.castShadow = true;directionalLight.position.set(2, 2, -2);scene.add(directionalLight);const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);// 关闭助手scene.add(directionalLightCameraHelper);/*** Sizes*/const sizes = {width: box.clientWidth,height: box.clientHeight,};window.addEventListener("resize", () => {// Update sizessizes.width = box.clientWidth;sizes.height = box.clientHeight;// Update cameracamera.aspect = sizes.width / sizes.height;camera.updateProjectionMatrix();// Update rendererrenderer.setSize(sizes.width, sizes.height);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));});/*** Camera*/// Base cameracamera = new THREE.PerspectiveCamera(75,sizes.width / sizes.height,0.1,100);camera.position.set(4, 4, 6);scene.add(camera);/*** Renderer*/renderer = new THREE.WebGLRenderer();renderer.setSize(sizes.width, sizes.height);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));renderer.setClearColor("#111");renderer.shadowMap.enabled = true;box.appendChild(renderer.domElement);// Controlscontrols = new OrbitControls(camera, renderer.domElement);// controls.enableDamping = true;
};const tick = () => {const elapsedTime = clock.getElapsedTime();controls?.update();// Update materialupdateOffsetData();if (uniform?.uTime) {uniform.uTime.value = elapsedTime;}// Renderrenderer.render(scene, camera);// Call tick again on the next framewindow.requestAnimationFrame(tick);
};const updateOffsetData = () => {if (analyser?.getFrequencyData) {analyser.getFrequencyData();const analyserData = analyser?.data;let sum = 0;for (let i = 0; i < analyserData.length; i++) {sum += analyserData[i];}sum /= analyserData.length * 25.5;uniform.uStrength.value = sum;}
};const play = () => {const listener = new THREE.AudioListener();const audio = new THREE.Audio(listener);const file = "/three-cesium-examples/public/files/audio/Avicii-WeBurn.mp3";mediaElement = new Audio(file);mediaElement.play();audio.setMediaElementSource(mediaElement);analyser = new THREE.AudioAnalyser(audio, fftSize);
};const pause = () => {mediaElement.pause();
};const createButton = () => {const playButton = document.createElement("button");playButton.textContent = "Play";playButton.style.position = "absolute";playButton.style.right = "140px";playButton.style.top = "30px";playButton.style.padding = "10px 20px";box.appendChild(playButton);playButton.addEventListener("click", play);const pauseButton = document.createElement("button");pauseButton.textContent = "Pause";pauseButton.style.position = "absolute";pauseButton.style.right = "30px";pauseButton.style.top = "30px";pauseButton.style.padding = "10px 20px";box.appendChild(pauseButton);pauseButton.addEventListener("click", pause);
};init();
createButton();
tick();

技术交流群
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/870471.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

RabbitMQ中常用的三种交换机【Fanout、Direct、Topic】

RabbitMQ中常用的三种交换机【Fanout、Direct、Topic】

目录 1、引入 2、Fanout交换机 案例&#xff1a;利用SpringAMQP演示Fanout交换机的使用 3、Direct交换机 案例&#xff1a;利用SpringAMQP演示Direct交换机的使用 4、Topic交换机 案例&#xff1a;利用SpringAMQP演示Topic交换机的使用 1、引入 真实的生产环境都会经过e…
阅读更多...
1. openstack

1. openstack

openstack 一、云的简介1、优势2、类型2.1 根据提供的服务范围2.2 根据提供服务不同 二、openstack核心组件1、核心组件2、nova组件2.1 nova核心进程 3、glance组件4、cinder组件5、neutron组件6、swift组件7、cellometer组件8、keystone组件9、heat组件10、dashboard 一、云的…
阅读更多...
韦东山嵌入式linux系列-LED 驱动程序框架

韦东山嵌入式linux系列-LED 驱动程序框架

1 回顾字符设备驱动程序框架 图中驱动层访问硬件外设寄存器依靠的是 ioremap 函数去映射到寄存器地址&#xff0c;然后开始控制寄存器。 那么该如何编写驱动程序&#xff1f; ① 确定主设备号&#xff0c;也可以让内核分配&#xff1b;② 定义自己的 file_operations 结构体&…
阅读更多...
【LeetCode:1071. 字符串的最大公因子 + 模拟 + 最大公约数】

【LeetCode:1071. 字符串的最大公因子 + 模拟 + 最大公约数】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
水库大坝安全监测险情应对措施

水库大坝安全监测险情应对措施

汛期暴雨洪涝灾害发生后&#xff0c;为保证大坝及下游人民生命财产安全&#xff0c;应及时进行大坝安全现场检查和快速评估。评估内容包括大坝沉降和水平变形、裂缝、坝坡是否塌滑、下游坡是否存在集中渗漏或大面积渗水、溢洪道启闭设备能否正常运行、近坝库岸是否有大的滑坡体…
阅读更多...
react学习——26react-redux实现求和案例（完整版）

react学习——26react-redux实现求和案例（完整版）

1、目录结构 2、components/count/index.js import React, {Component} from "react"; export default class Count extends Component {//加法increment()>{const {value} this.selectNumthis.props.jia(Number(value))}//减法decrement()>{const {value} …
阅读更多...
一场夏测杀出个“双冠王”，极越01成为纯电SUV标杆

一场夏测杀出个“双冠王”，极越01成为纯电SUV标杆

文 | AUTO芯球 作者 | 雷慢 万万没想到&#xff0c;懂车帝夏测运动会杀出一匹最大的黑马&#xff0c;竟然是极越01。 当前正在进行的懂车帝夏测运动会&#xff0c;在“纯电SUV/MPV续航达成率”赛事中&#xff0c;极越01以85.8%的续航达成率获得第一名。并且由于赛制规则限制…
阅读更多...
应力 (Stress) 是指单位面积上所承受的力

应力 (Stress) 是指单位面积上所承受的力

应力 (Stress) 是指单位面积上所承受的力 flyfish 轴向力 轴向力 (Axial Force) 是指沿着物体的纵轴施加的力。对于一根杆或柱子&#xff0c;轴向力可以是拉力或压力&#xff0c;具体取决于力的方向。 拉力 (Tensile Force)&#xff1a;使物体拉长的力。 压力 (Compressive…
阅读更多...
Vue中实现在线画流程图实现

Vue中实现在线画流程图实现

概述 最近在调研一些在线文档的实现&#xff0c;包括文档编辑器、在线思维导图、在线流程图等&#xff0c;前面的文章基于语雀编辑器的在线文档编辑与查看实现了文档编辑器。在本文&#xff0c;分享在Vue框架下基于metaeditor-mxgraph实现在线流程图。 实现效果 实现 1. 添加…
阅读更多...
LabVIEW开发CAN总线多传感器液位检测系统

LabVIEW开发CAN总线多传感器液位检测系统

设计并实现了一个基于CAN总线和LabVIEW的多传感器液位检测系统。该系统利用STM32F107单片机进行模拟信号与数字信号的转换&#xff0c;通过TJA1050实现CAN总线通信&#xff0c;并使用USB-CAN分析仪连接PC。LabVIEW用于数据采集、人机交互界面的设计、数据分析和仪器标定。系统能…
阅读更多...
Paimon下载使用和基础操作说明

Paimon下载使用和基础操作说明

简介 Apache Paimon 是一种湖格式&#xff0c;支持使用 Flink 和 Spark 构建实时湖仓一体架构 用于流式处理和批处理操作。Paimon创新性地将湖格式与LSM&#xff08;Log-structured merge-tree&#xff09;相结合 结构&#xff0c;将实时流式更新引入 Lake 架构。 Paimon提供以…
阅读更多...
行为树（BehaviorTree ）常见的几种节点类型

行为树（BehaviorTree ）常见的几种节点类型

阅读更多...
05_TypeScript 中的数据类型

05_TypeScript 中的数据类型

TypeScript 中的数据类型 一、概述二、详解布尔类型&#xff08;boolean&#xff09; true / false数字类型&#xff08;number&#xff09;字符串类型&#xff08;string&#xff09;数组类型&#xff08;array&#xff09;元组类型&#xff08;tuple&#xff09; 属于数组的一…
阅读更多...
linux高级编程（网络）

linux高级编程（网络）

数据的封包和拆包 封包&#xff1a; 应用层数据&#xff08;例如HTTP请求&#xff09;被传递给传输层。传输层&#xff08;TCP&#xff09;在数据前添加TCP头部&#xff08;包含端口号、序列号等&#xff09;。网络层&#xff08;IP&#xff09;在TCP段前添加IP头部&#xff…
阅读更多...
C#Winform窗体中嵌入exe文件

C#Winform窗体中嵌入exe文件

1&#xff0c;效果以嵌入Modbus Slave为例&#xff1a; 2&#xff0c;代码&#xff1a; public partial class Form1 : Form{//设置嵌入exe的常量private const int nIndex -16;private const int dwNewLong 0x10000000;Process m_AppProcess;public Form1(){InitializeCompo…
阅读更多...
VIM模式之间的切换

VIM模式之间的切换

命令行界面下&#xff0c;常用的文本编辑器是 VI / VIM(VI增强版)&#xff0c;VI 是 Linux 最通用的文本编辑器&#xff0c;VIM相较于VI&#xff0c;提供了代码高亮等功能&#xff0c;两者用法完全兼容&#xff1b; 1. 进入 VIM 工作界面 vim 文件名 2. 进入编辑模式 三种方…
阅读更多...
ENSP中OSPF配置

ENSP中OSPF配置

题目 划分网段&#xff0c;配置ip OSPF配置按照区域划分&#xff0c;这个网段也要按照区域个数划分&#xff0c;如这一题&#xff0c;分成两个区域&#xff0c;所以将192.168.1.0/24划分先为两个网段&#xff0c;然后在具体的划分区域中的网段。 以交换机为中心的三条线属于一…
阅读更多...
[Qt] Qt Creator中，新建QT文件时选择界面模版下的各选项

[Qt] Qt Creator中，新建QT文件时选择界面模版下的各选项

在Qt Creator中&#xff0c;新建文件时选择界面模版下的各选项具有特定的意义&#xff0c;这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。以下是对这些选项的详细解释&#xff1a; 0. Qt Item Model 意义&#xff1a;列表模型是Qt中用于表示和操作数据的强大抽…
阅读更多...
Android 使用 Debug.startMethodTracing 分析方法耗时

Android 使用 Debug.startMethodTracing 分析方法耗时

参考 Generate Trace Logs by Instrumenting Your App 官网提供了 trace 工具来分析方法耗时。 生成 trace 文件 package com.test.luodemo.trace;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; import android.os.Debug; import android.uti…
阅读更多...
js vue table单元格合并

js vue table单元格合并

实现效果 关键代码 <table classtable table-bordered><thead><tr><th>检测项目</th><th>详细说明</th><th>检测结果</th><th>检测说明</th></tr></thead><tbody><tr ng-repeatrow in…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023