ThreeJs的音频和位置音频

Threejs的场景有时候需要引入声音,比如下雨声音,撞击声音等,这需要用到Threejs的两个类Audio和PositionalAudio,第一个Audio是普通的声音,比如下雨,在整个场景中听到的都是下雨的声音,而且每个位置的声音都一样大小,那么就需要用Audio,也可以作为3D场景的背景音乐来用,但是如果是某个位置发生了撞击,那么应该是距离越远,听到撞击的声音越小,也就是要把声源的位置固定,把耳朵绑定到相机上,相机距离声源越远听到的声音越小,相机距离声源越近听到的声音越大,此外,如果撞击声音在左侧,那么应该左侧耳机声音更大,如果撞击发生在右侧,正好想反,下面看下整个过程:

首先创建场景:

initScene(){scene = new THREE.Scene();},initCamera(){this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(10,10,10);this.camera.lookAt(0,0,0)},initLight(){//添加两个平行光const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight1.position.set(300,300,600)scene.add(directionalLight1);const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);directionalLight2.position.set(600,200,600)scene.add(directionalLight2);},
initRenderer(){this.renderer = new THREE.WebGLRenderer({ antialias: true });this.container = document.getElementById("container")this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);this.renderer.setClearColor('#AAAAAA', 1.0);this.container.appendChild(this.renderer.domElement);},initControl(){this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度},initAnimate() {requestAnimationFrame(this.initAnimate);this.renderer.render(scene, this.camera);},

然后创建监听和声音,先创建一个监听:AudioListener,再创建一个Audio加载器用来加载声音,

AudioLoader,然后播放声音就可以了,

initAudio(){// 创建一个监听者let listener = new THREE.AudioListener();// 创建一个非位置音频对象  用来控制播放let audio = new THREE.Audio(listener);// 创建一个音频加载器对象let audioLoader = new THREE.AudioLoader();// 加载音频文件,返回一个音频缓冲区对象作为回调函数参数audioLoader.load('/static/video/music.mp3', function(AudioBuffer) {// 音频缓冲区对象关联到音频对象audioaudio.setBuffer(AudioBuffer);audio.setLoop(true); //是否循环audio.setVolume(0.5); //音量// 播放缓冲区中的音频数据audio.play();});},

这里也可以用一个简单的用html隐藏一个audio标签实现,并用js控制,因为这里不会对音乐做特殊的处理,这里就不演示效果了。

再来试下位置音频,同样是加载一个监听和一个声音,但是这里为了了解音频的位置,所以先创建一个模型,将音频绑定到模型上,后面就可以通过改变相机的位置,体验下不同距离和位置对听到的声音的影响。

initAudio(){let geometry = new THREE.BoxGeometry(2,2,2);let material = new THREE.MeshPhysicalMaterial({color:'#1c32b5'});let audioMesh = new THREE.Mesh(geometry, material);// 设置网格模型的位置,相当于设置音源的位置audioMesh.position.set(0, 0, 0);scene.add(audioMesh);// 创建一个虚拟的监听者let listener = new THREE.AudioListener();// 监听者绑定到相机对象this.camera.add(listener);// 创建一个位置音频对象,监听者作为参数,音频和监听者关联。let PosAudio = new THREE.PositionalAudio(listener);//音源绑定到一个网格模型上audioMesh.add(PosAudio);// 创建一个音频加载器let audioLoader = new THREE.AudioLoader();// 加载音频文件,返回一个音频缓冲区对象作为回调函数参数audioLoader.load('/static/video/music.mp3', function(AudioBuffer) {// console.log(buffer);// 音频缓冲区对象关联到音频对象audioPosAudio.setBuffer(AudioBuffer);PosAudio.setVolume(0.9); //音量PosAudio.setRefDistance(200); //参数值越大,声音越大PosAudio.play(); //播放});},

效果如下:

threejs场景下的音频和位置音频

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

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

相关文章

[C语言]——操作符详解

目录 一.操作符的分类 二.二进制和进制转换 1.二进制转十进制 2.二进制转八进制和十六进制 2.1二进制转八进制 2.2二进制转十六进制 三.原码、反码、补码 四.移位操作符 1.左移操作符 2.右移操作符 五.位操作符:&、|、^、~ 练习1:编写代码实…

3d纸模型图纸制作方法---模大狮模型网

制作3D纸模型图纸通常需要按照以下步骤进行: 选择设计模型: 首先确定你想要制作的3D纸模型的设计,可以是建筑物、动物、交通工具等各种形式的模型。 绘制设计图纸: 使用计算机辅助设计软件(如AutoCAD、SketchUp)或手工绘图工具…

jsp基本语法

jsp的基本语法:java代码放在<% %>之间 jsp的变量定义:局部变量定义放在<% %>之间&#xff0c;全局变量放在<%! %>之间 jsp的表达式&#xff1a;把值显示在网页上&#xff0c;语法是:<%表达式> <% page language"java" contentType&quo…

JavaMySQL高级一(下)

目录 1.常用函数 1.字符串函数 2.时间日期函数 3.聚合函数 4.数学函数 2.分布查询 3.子查询基础 1.简单子查询 1.常用函数 在程序开发过程中&#xff0c;除了简单的数据查询&#xff0c;还有基于已数据进行数据的统计分析计算等需求。因此&#xff0c;在SQL中将一…

【小白成长记】使用watch优化获取不同tab下数据的代码逻辑

场景&#xff1a;页面有一个 el-tab&#xff0c;共两个tab&#xff1a;Tab1 与 Tab2。需求要求进入页面默认active第二个tab即Tab2。 开始代码写成如下&#xff1a; <el-tabs v-model"tabActiveName" type"card" before-leave"handleTabsClick&q…

数据库学习记录(二)多表设计与多表查询

一对多 一对多时候&#xff0c;一张表内的一个数据可能对应着其他表内的多个数据&#xff0c;例如一个部门内有多个员工&#xff0c;但是公司里不只一个部门&#xff0c;也不止一个员工&#xff0c;这个时候就是一对多的情况&#xff0c;这个时候可以绑定一个外键&#xff0c;…

Linux 磁盘的一生

注意&#xff1a;实验环境都是使用VMware模拟 ​ 磁盘接口类型这里vm中是SCSI&#xff0c;扩展sata,ide(有时间可以看看或者磁盘的历史) ​ 总结&#xff1a;磁盘从有到无—类似于建房子到可以住 ————————————————————————————————————…

php laravel 二维码

public function qr($url,$name2,$inpath){require_once(dirname(__FILE__) . /../../../Library/phpqrcode/phpqrcode.php);$errorCorrectionLevel L;//容错级别$matrixPointSize 10;//生成图片大小$QRcode new \QRcode() ;$QRcode->png($url, $inpath.$name2, $errorCor…

react快速入门教程

react快速入门教程 React是一个用于构建用户界面的JavaScript库。它由Facebook开发,并且已经成为前端开发中最受欢迎的工具之一。本快速入门教程将介绍React的基础知识和常用概念,帮助你开始使用React构建交互式的Web应用程序。 1. React的创建和嵌套组件 React是一个JavaSc…

YOLOv5改进系列:Efficientrep结构助力涨点

一、论文理论 本文提出一种硬件友好的卷积神经网络结构,该结构类似于repvgg。在衡量网络效率时,经常使用Flops或者参数量,这些衡量指标对于硬件计算能力和内存带宽不敏感。因此,如何设计一个神经网络架构,使其有效地利用硬件计算能力和内存带宽是至关重要的。 论文地址:…

@Autowired详解

请直接看原文: Autowired注解详解——超详细易懂-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- Autowired详解 要搞明白Autowired注解就是要了解它是什么&#xff1f;有…

C++入门(下)

文章目录 1:引用1.1:引用概念1.2:引用的特性.1.2.1:引用在定义时必须初始化1.2.2:一个变量可以有多个引用1.2.3:引用一旦引用一个实体,再不能引用其他实体. 1.3:应用场景1.3.1:做参数1.3.2:做返回值1.3.2.1:传值返回1.3.2.2:传引用返回(错误示范)1.3.2.3:传引用返回(正确示范) …

如何在Ubuntu使用宝塔部署Emlog网站并发布到公网实现任意浏览器访问

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…

springboot Thymeleaf模版引擎使用

1.引入依赖 <!--thymeleaf视图引擎--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> html中要声明约束&#xff0c;这样就可以使用themelraf视…

探索 PostgreSQL 的外部数据包装器和统计函数

PostgreSQL 因其稳定性和可扩展性而广受青睐&#xff0c;为开发人员和数据管理员提供了许多有用的函数。在这些函数中&#xff0c;file_fdw_handler、file_fdw_validator、pg_stat_statements、pg_stat_statements_info 以及 pg_stat_statements_reset 是其中的重要函数&#x…

MySOL数据库管理

数据库基本操作 库和表 数据库–>数据表–>行&#xff08;记录&#xff09;&#xff1a;用来描述一个对象的信息列&#xff08;字段&#xff09;&#xff1a;用来描述对象的一个属性常用的数据类型 int整型float单精度浮点 4字节32位double双精度浮点 8字节64位char固…

牛客小白月赛58-C-牛牛

很好的一道模拟题,做起来很舒服 做模拟题重要的还是心态,能静得下心读题 思路: 读完题后,很直观的一个思路就是暴力,但2e5的O(n^2)过不去,怎么优化?? 就是转换 sum ∑a[i] (sum - S0) % m 0 结果 v S0 % m 可以这么转换 sum % m S0 % m 令sum % m k 那么就是…

3d模型变形动画怎么做---模大狮模型网

要制作3D模型的变形动画&#xff0c;你可以通过使用动画软件(如Blender、Maya、3ds Max等)中的变形工具和技术来实现。以下是一般的步骤来制作3D模型的变形动画&#xff1a; 创建基础模型&#xff1a;首先&#xff0c;在3D建模软件中创建或导入你想要进行变形的基础模型。这个基…

LeetCode 刷题 --- 快速幂

前言&#xff1a; 幂运算是一种常见的运算&#xff0c;求取a^n,最容易想到的方法便是通过循环逐个累乘&#xff0c;其复杂度为O(n)&#xff0c;这在很多时候是不够快的&#xff0c;所以我们需要一种算法来优化幂运算的过程。 快速幂&#xff0c;二进制取幂&#xff08;Binary…

JAVA 100道题(12)

12.使用HashSet存储一组不重复的字符串&#xff0c;并编写一个方法检查某个字符串是否已存在于集合中 以下是使用Java中的HashSet来存储一组不重复的字符串&#xff0c;并编写一个方法来检查某个字符串是否已存在于集合中的示例代码&#xff1a; java复制代码 import java.ut…