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.rhkb.cn/news/374836.html

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

相关文章

STM32中断（NVIC和EXIT）

STM32中断（NVIC和EXIT）

CM3 内核支持 256 个中断&#xff0c;其中包含了 16 个内核中断和 240个外部中断&#xff0c;并且具有 256 级的可编程中断设置。但STM32 并没有使用CM3内核的全部东西&#xff0c;而是只用了它的一部分。STM32有 76 个中断&#xff0c;包括16 个内核中断和 60 个可屏蔽中断&am…
阅读更多...
Codeforces Round 954 (Div. 3)(A~D题)

Codeforces Round 954 (Div. 3)(A~D题)

A. X Axis 思路: 1~10暴力枚举一下所有可能 代码: #include<bits/stdc.h> using namespace std; #define N 1000005 typedef long long ll; typedef unsigned long long ull; ll n, m, t, h, k; ll a, b, c; ll ans, num, sum, cnt; ll temp[N], f1[N], f2[N]; bool f…
阅读更多...
无头单向非循环链表实现 and leetcode刷题

无头单向非循环链表实现 and leetcode刷题

无头单向非循环链表实现 1. 单链表的模拟实现IList.java接口&#xff1a;MySingleList.java文件&#xff1a; 2. leetcode刷题2.1 获取链表的中间节点2.2 删除链表中所有值为value的元素2.3 单链表的逆置2.4 获取链表倒数第k个节点2.5 给定 x, 把一个链表整理成前半部分小于 x,…
阅读更多...
java使用easypoi模版导出word详细步骤

java使用easypoi模版导出word详细步骤

文章目录 第一步、引入pom依赖第二步、新建导出工具类WordUtil第三步、创建模版word4.编写接口代码5.导出结果示例 第一步、引入pom依赖 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><…
阅读更多...
AutoMQ vs Kafka: 来自小红书的独立深度评测与对比

AutoMQ vs Kafka: 来自小红书的独立深度评测与对比

测试背景 当前小红书消息引擎团队与 AutoMQ 团队正在深度合作&#xff0c;共同推动社区建设&#xff0c;探索云原生消息引擎的前沿技术。本文基于 OpenMessaging 框架&#xff0c;对 AutoMQ 进行了全面测评。欢迎大家参与社区并分享测评体验。 01 测试结论 本文主要测评云…
阅读更多...
Elon Musk开源Grok

Elon Musk开源Grok

转载自&#xff1a;AILab基地 早在6天前&#xff0c;马斯克就发文称xAI将开源Grok 图片 13小时前&#xff0c;马斯克开源了旗下公司X的Grok训练模型&#xff0c;并喊话OpenAI&#xff0c;你名字里的Open到底在哪里 图片 下面是xai-org的GitHub开源地址[https://github.com/x…
阅读更多...
yolov8、RTDETR无法使用多个GPU训练

yolov8、RTDETR无法使用多个GPU训练

yolov8、RTDETR无法使用多个GPU训练 网上看了好多解决方法&#xff1a; 什么命令行 CUDA_VISIBLE_DEVICES0,1 python train.py 环境变量都不行 最后找到解决方案&#xff1a;在ultralytics/engine/trainer.py 中的第246行 将 self.model DDP(self.model, device_ids[RANK])…
阅读更多...
学习测试7-ADB的使用

学习测试7-ADB的使用

ADB是什么&#xff1f; ADB&#xff0c;即 Android Debug Bridge&#xff08;安卓调试桥&#xff09; 是一种允许模拟器或已连接的 Android 设备进行通信的命令行工具&#xff0c;它可为各种设备操作提供便利&#xff0c;如安装和调试应用&#xff0c;并提供对 Unix shell&…
阅读更多...
C++|智能指针

C++|智能指针

目录 引入 一、智能指针的使用及原理 1.1RAII 1.2智能指针原理 1.3智能指针发展 1.3.1std::auto_ptr 1.3.2std::unique_ptr 1.3.3std::shared_ptr 二、循环引用问题及解决方法 2.1循环引用 2.2解决方法 三、删除器 四、C11和boost中智能指针的关系 引入 回顾上…
阅读更多...
如何分析软件测试中发现的Bug！

如何分析软件测试中发现的Bug！

假如你是一名软件测试工程师&#xff0c;每天面对的就是那些“刁钻”的Bug&#xff0c;它们像是隐藏在黑暗中的敌人&#xff0c;时不时跳出来给你一个“惊喜”。那么&#xff0c;如何才能有效地分析和处理这些Bug&#xff0c;让你的测试工作变得高效且有趣呢&#xff1f;今天我…
阅读更多...
SpringBoot配置flyway

SpringBoot配置flyway

背景 目前我们的项目代码都会交由Git、SVN等版本管理工具进行管理&#xff0c;但是我们的sql脚本&#xff0c;尤其是各类ddl脚本并没有进行版本的管理&#xff08;python的web框架Django默认就提供了类似的工具&#xff0c;从一开始就鼓励开发者通过版本管理的方式进行数据库的…
阅读更多...
Android Studio 的Gradle下载慢，Gradle切换下载源

Android Studio 的Gradle下载慢，Gradle切换下载源

看图 下面的文字地址因为转义符号的问题&#xff0c;https后面少了一个斜杠看图片进行补充&#xff0c;直接复制不知道能不能用 distributionUrlhttps://mirrors.cloud.tencent.com/gradle/gradle-8.7-bin.zip
阅读更多...
第一关：Linux基础知识

第一关：Linux基础知识

Linux基础知识目录 前言LinuxInternStudio 关卡1. InternStudio开发机介绍2. SSH及端口映射2.1 什么是SSH&#xff1f;2.2 如何使用SSH远程连接开发机&#xff1f;2.2.1 使用密码进行SSH远程连接2.2.2 配置SSH密钥进行SSH远程连接2.2.3 使用VScode进行SSH远程连接 2.3. 端口映射…
阅读更多...
进度条提示-在python程序中使用避免我误以为挂掉了

进度条提示-在python程序中使用避免我误以为挂掉了

使用库tqdm 你还可以手写一点&#xff0c;反正只要是输出点什么东西都可以&#xff1b; Demo from chatgpt import time from tqdm import tqdm# 示例函数&#xff0c;模拟长时间运行的任务 def long_running_task():total_steps 100for step in tqdm(range(total_steps), …
阅读更多...
手机容器化 安装docker

手机容器化 安装docker

旧手机-基于Termux容器化 1、安装app 在手机上安装Termux或ZeroTermux&#xff08;Termux扩展&#xff09; 1.1 切换源 注&#xff1a;可以将termux进行换源&#xff0c;最好采用国内源&#xff0c;例如&#xff1a;清华源等 更新包列表和升级包&#xff08;可选&#xff0…
阅读更多...
vue 画二维码及长按保存

vue 画二维码及长按保存

需求 想要做如下图的二维码带文字&#xff0c;且能够长按保存 前期准备 一个canvas安装qrcode&#xff08;命令&#xff1a;npm i qrcode&#xff09; 画二维码及文字 初始化画布 <template><div><canvas ref"canvas" width"300" he…
阅读更多...
8627 数独

8627 数独

为了判断数独解是否合法&#xff0c;我们需要遵循以下步骤&#xff1a; 1. **检查每一行**&#xff1a;确保1到9每个数字在每一行中只出现一次。 2. **检查每一列**&#xff1a;确保1到9每个数字在每一列中只出现一次。 3. **检查每个3x3的宫**&#xff1a;确保1到9每个数字在…
阅读更多...
在pycharm中使用jupyter

在pycharm中使用jupyter

在pycharm中使用jupyter 前置条件&#xff1a;你的环境中应该有juptyer &#xff0c;没有的话 pip install jupyter 点击项目目录&#xff0c;右键->new->jupyter notebook 打开file settings 找到 jupyter server &#xff08;按照默认的用代理服务器就行&#xff09; P…
阅读更多...
东芝 TB5128FTG 强大性能的步进电机驱动器

东芝 TB5128FTG 强大性能的步进电机驱动器

TB5128FTG它以高精度和高效能为设计理念&#xff0c;采用 PWM 斩波方法&#xff0c;并内置时钟解码器。通过先进的 BiCD 工艺制造&#xff0c;这款驱动器提供高达 50V 和 5.0A 的输出额定值&#xff0c;成为广泛应用场景中的强劲解决方案。 主要特性 TB5128FTG 拥有众多确保高…
阅读更多...
码云远程仓库, 回滚到指定版本号

码云远程仓库, 回滚到指定版本号

1. 打开项目路径, 右击Git Bash Here 2. 查找历史版本 git reflog 3. 回退到指定版本 git reset --hard 版本号 4. 强制推送到远程 git push -f
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发