首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Added PositionalAudioHelper

Mugen87 6 年之前
父节点
b75e23802a
当前提交
cdf855bf84
共有 8 个文件被更改，包括 278 次插入 和 3 次删除
合并视图 显示文件统计
  1. 73 0
      docs/api/en/helpers/PositionalAudioHelper.html
  2. 73 0
      docs/api/zh/helpers/PositionalAudioHelper.html
  3. 2 0
      docs/list.js
  4. 6 3
      examples/webaudio_orientation.html
  5. 1 0
      src/Three.d.ts
  6. 1 0
      src/Three.js
  7. 14 0
      src/helpers/PositionalAudioHelper.d.ts
  8. 108 0
      src/helpers/PositionalAudioHelper.js

+ 73 - 0
docs/api/en/helpers/PositionalAudioHelper.html
查看文件 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<base href="../../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		[page:Object3D] &rarr;
 
+
 
+		<h1>[name]</h1>
 
+
 
+		<p class="desc">This helper displays the directional cone of a [page:PositionalAudio].</p>
 
+
 
+		<h2>Example</h2>
 
+
 
+		<div>[example:webaudio_orientation webaudio / orientation ]</div>
 
+
 
+		<h2>Code Example</h2>
 
+		<code>
 
+var positionalAudio = new THREE.PositionalAudio( listener );
 
+positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
+
 
+var helper = new PositionalAudioHelper( positionalAudio );
 
+positionalAudio.add( helper );
 
+		</code>
 
+
 
+
 
+		<h2>Constructor</h2>
 
+
 
+		<h3>[name]( [param:PositionalAudio audio], [param:Number range] )</h3>
 
+		<p>
 
+			[page:PositionalAudio audio] -- The [page:PositionalAudio] to be visualized. <br /><br/>
 
+
 
+			[page:Number range] -- (optional) The range of the directional cone. <br /><br/>
 
+
 
+			[page:Number divisionsInnerAngle] -- (optional) The amount of divisions of the inner part of the directional cone. <br /><br/>
 
+
 
+			[page:Number divisionsOuterAngle] -- (optional) The amount of divisions of the outer part of the directional cone. <br /><br/>
 
+		</p>
 
+
 
+
 
+		<h2>Properties</h2>
 
+		<p>See the base [page:Object3D] class for common properties.</p>
 
+
 
+		<h3>[property:PositionalAudio audio]</h3>
 
+		<p>[page:PositionalAudio] to be visualized.</p>
 
+
 
+		<h3>[property:Number range]</h3>
 
+		<p>The range of the directional cone.</p>
 
+
 
+		<h3>[property:Number divisionsInnerAngle]</h3>
 
+		<p>The amount of divisions of the inner part of the directional cone.</p>
 
+
 
+		<h3>[property:Number divisionsOuterAngle]</h3>
 
+		<p>The amount of divisions of the outer part of the directional cone.</p>
 
+
 
+		<h2>Methods</h2>
 
+		<p>See the base [page:Object3D] class for common methods.</p>
 
+
 
+		<h3>[method:null dispose]()</h3>
 
+		<p>Disposes of the helper.</p>
 
+
 
+		<h3>[method:null update]()</h3>
 
+		<p>Updates the helper.</p>
 
+
 
+		<h2>Source</h2>
 
+
 
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 
+	</body>
 
+</html>

+ 73 - 0
docs/api/zh/helpers/PositionalAudioHelper.html
查看文件 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<base href="../../../" />
 
+		<script src="list.js"></script>
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		[page:Object3D] &rarr;
 
+
 
+		<h1>[name]</h1>
 
+
 
+		<p class="desc">This helper displays the directional cone of a [page:PositionalAudio].</p>
 
+
 
+		<h2>Example</h2>
 
+
 
+		<div>[example:webaudio_orientation webaudio / orientation ]</div>
 
+
 
+		<h2>Code Example</h2>
 
+		<code>
 
+var positionalAudio = new THREE.PositionalAudio( listener );
 
+positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
+
 
+var helper = new PositionalAudioHelper( positionalAudio );
 
+positionalAudio.add( helper );
 
+		</code>
 
+
 
+
 
+		<h2>Constructor</h2>
 
+
 
+		<h3>[name]( [param:PositionalAudio audio], [param:Number range] )</h3>
 
+		<p>
 
+			[page:PositionalAudio audio] -- The [page:PositionalAudio] to be visualized. <br /><br/>
 
+
 
+			[page:Number range] -- (optional) The range of the directional cone. <br /><br/>
 
+
 
+			[page:Number divisionsInnerAngle] -- (optional) The amount of divisions of the inner part of the directional cone. <br /><br/>
 
+
 
+			[page:Number divisionsOuterAngle] -- (optional) The amount of divisions of the outer part of the directional cone. <br /><br/>
 
+		</p>
 
+
 
+
 
+		<h2>Properties</h2>
 
+		<p>See the base [page:Object3D] class for common properties.</p>
 
+
 
+		<h3>[property:PositionalAudio audio]</h3>
 
+		<p>[page:PositionalAudio] to be visualized.</p>
 
+
 
+		<h3>[property:Number range]</h3>
 
+		<p>The range of the directional cone.</p>
 
+
 
+		<h3>[property:Number divisionsInnerAngle]</h3>
 
+		<p>The amount of divisions of the inner part of the directional cone.</p>
 
+
 
+		<h3>[property:Number divisionsOuterAngle]</h3>
 
+		<p>The amount of divisions of the outer part of the directional cone.</p>
 
+
 
+		<h2>Methods</h2>
 
+		<p>See the base [page:Object3D] class for common methods.</p>
 
+
 
+		<h3>[method:null dispose]()</h3>
 
+		<p>Disposes of the helper.</p>
 
+
 
+		<h3>[method:null update]()</h3>
 
+		<p>Updates the helper.</p>
 
+
 
+		<h2>Source</h2>
 
+
 
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 
+	</body>
 
+</html>

+ 2 - 0
docs/list.js
查看文件 

@@ -196,6 +196,7 @@ var list = {
 
 				"FaceNormalsHelper": "api/en/helpers/FaceNormalsHelper",
 
 				"FaceNormalsHelper": "api/en/helpers/FaceNormalsHelper",
 
 				"GridHelper": "api/en/helpers/GridHelper",
 
 				"GridHelper": "api/en/helpers/GridHelper",
 
 				"PolarGridHelper": "api/en/helpers/PolarGridHelper",
 
 				"PolarGridHelper": "api/en/helpers/PolarGridHelper",
 
+				"PositionalAudioHelper": "api/en/helpers/PositionalAudioHelper",
 
 				"HemisphereLightHelper": "api/en/helpers/HemisphereLightHelper",
 
 				"HemisphereLightHelper": "api/en/helpers/HemisphereLightHelper",
 
 				"PlaneHelper": "api/en/helpers/PlaneHelper",
 
 				"PlaneHelper": "api/en/helpers/PlaneHelper",
 
 				"PointLightHelper": "api/en/helpers/PointLightHelper",
 
 				"PointLightHelper": "api/en/helpers/PointLightHelper",
 
@@ -621,6 +622,7 @@ var list = {
 
 				"FaceNormalsHelper": "api/zh/helpers/FaceNormalsHelper",
 
 				"FaceNormalsHelper": "api/zh/helpers/FaceNormalsHelper",
 
 				"GridHelper": "api/zh/helpers/GridHelper",
 
 				"GridHelper": "api/zh/helpers/GridHelper",
 
 				"PolarGridHelper": "api/zh/helpers/PolarGridHelper",
 
 				"PolarGridHelper": "api/zh/helpers/PolarGridHelper",
 
+				"PositionalAudioHelper": "api/zh/helpers/PositionalAudioHelper",
 
 				"HemisphereLightHelper": "api/zh/helpers/HemisphereLightHelper",
 
 				"HemisphereLightHelper": "api/zh/helpers/HemisphereLightHelper",
 
 				"PlaneHelper": "api/zh/helpers/PlaneHelper",
 
 				"PlaneHelper": "api/zh/helpers/PlaneHelper",
 
 				"PointLightHelper": "api/zh/helpers/PointLightHelper",
 
 				"PointLightHelper": "api/zh/helpers/PointLightHelper",

+ 6 - 3
examples/webaudio_orientation.html
查看文件 

@@ -114,7 +114,7 @@
 
 		//
 
 		//
 
 
 
 		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
 		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
-		camera.position.set( 0, 1, 2 );
 
+		camera.position.set( 3, 2, 3 );
 
 
 
 		var reflectionCube = new THREE.CubeTextureLoader()
 
 		var reflectionCube = new THREE.CubeTextureLoader()
 
 			.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
 			.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
@@ -151,7 +151,7 @@
 
 		mesh.receiveShadow = true;
 
 		mesh.receiveShadow = true;
 
 		scene.add( mesh );
 
 		scene.add( mesh );
 
 
 
-		var grid = new THREE.GridHelper( 50, 50, 0x444444, 0x444444 );
 
+		var grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
 
 		scene.add( grid );
 
 		scene.add( grid );
 
 
 
 		//
 
 		//
 
@@ -165,7 +165,10 @@
 
 		var positionalAudio = new THREE.PositionalAudio( listener );
 
 		var positionalAudio = new THREE.PositionalAudio( listener );
 
 		positionalAudio.setMediaElementSource( audioElement );
 
 		positionalAudio.setMediaElementSource( audioElement );
 
 		positionalAudio.setRefDistance( 1 );
 
 		positionalAudio.setRefDistance( 1 );
 
-		positionalAudio.setDirectionalCone( 210, 230, 0.1 );
 
+		positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
+
 
+		var helper = new THREE.PositionalAudioHelper( positionalAudio, 0.1 );
 
+		positionalAudio.add( helper );
 
 
 
 		//
 
 		//

+ 1 - 0
src/Three.d.ts
查看文件 

@@ -137,6 +137,7 @@ export { RectAreaLightHelper } from './helpers/RectAreaLightHelper';
 
 export { HemisphereLightHelper } from './helpers/HemisphereLightHelper';
 
 export { HemisphereLightHelper } from './helpers/HemisphereLightHelper';
 
 export { GridHelper } from './helpers/GridHelper';
 
 export { GridHelper } from './helpers/GridHelper';
 
 export { PolarGridHelper } from './helpers/PolarGridHelper';
 
 export { PolarGridHelper } from './helpers/PolarGridHelper';
 
+export { PositionalAudioHelper } from './helpers/PositionalAudioHelper';
 
 export { FaceNormalsHelper } from './helpers/FaceNormalsHelper';
 
 export { FaceNormalsHelper } from './helpers/FaceNormalsHelper';
 
 export { DirectionalLightHelper } from './helpers/DirectionalLightHelper';
 
 export { DirectionalLightHelper } from './helpers/DirectionalLightHelper';
 
 export { CameraHelper } from './helpers/CameraHelper';
 
 export { CameraHelper } from './helpers/CameraHelper';

+ 1 - 0
src/Three.js
查看文件 

@@ -131,6 +131,7 @@ export { RectAreaLightHelper } from './helpers/RectAreaLightHelper.js';
 
 export { HemisphereLightHelper } from './helpers/HemisphereLightHelper.js';
 
 export { HemisphereLightHelper } from './helpers/HemisphereLightHelper.js';
 
 export { GridHelper } from './helpers/GridHelper.js';
 
 export { GridHelper } from './helpers/GridHelper.js';
 
 export { PolarGridHelper } from './helpers/PolarGridHelper.js';
 
 export { PolarGridHelper } from './helpers/PolarGridHelper.js';
 
+export { PositionalAudioHelper } from './helpers/PositionalAudioHelper.js';
 
 export { FaceNormalsHelper } from './helpers/FaceNormalsHelper.js';
 
 export { FaceNormalsHelper } from './helpers/FaceNormalsHelper.js';
 
 export { DirectionalLightHelper } from './helpers/DirectionalLightHelper.js';
 
 export { DirectionalLightHelper } from './helpers/DirectionalLightHelper.js';
 
 export { CameraHelper } from './helpers/CameraHelper.js';
 
 export { CameraHelper } from './helpers/CameraHelper.js';

+ 14 - 0
src/helpers/PositionalAudioHelper.d.ts
查看文件 

@@ -0,0 +1,14 @@
 
+import { PositionalAudio } from './../audio/PositionalAudio';
 
+import { Line } from './../objects/Line';
 
+
 
+export class PositionalAudioHelper extends Line {
 
+  constructor(audio: PositionalAudio, range?: number, divisionsInnerAngle?: number, divisionsOuterAngle?: number);
 
+
 
+  audio: PositionalAudio;
 
+  range: number;
 
+  divisionsInnerAngle: number;
 
+  divisionsOuterAngle: number;
 
+
 
+  dispose(): void;
 
+  update(): void;
 
+}

+ 108 - 0
src/helpers/PositionalAudioHelper.js
查看文件 

@@ -0,0 +1,108 @@
 
+/**
 
+ * @author Mugen87 / http://github.com/Mugen87
 
+ */
 
+
 
+import { BufferGeometry } from '../core/BufferGeometry.js';
 
+import { BufferAttribute } from '../core/BufferAttribute.js';
 
+import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
 
+import { Line } from '../objects/Line.js';
 
+import { _Math } from '../math/Math.js';
 
+
 
+function PositionalAudioHelper( audio, range, divisionsInnerAngle, divisionsOuterAngle ) {
 
+
 
+	this.audio = audio;
 
+ 	this.range = range || 1;
 
+ 	this.divisionsInnerAngle = divisionsOuterAngle || 16;
 
+	this.divisionsOuterAngle = divisionsOuterAngle || 2;
 
+
 
+	var geometry = new BufferGeometry();
 
+	var divisions = this.divisionsInnerAngle + this.divisionsOuterAngle * 2;
 
+	var positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
 
+	geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
 
+
 
+	var materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
 
+	var materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );
 
+
 
+	Line.call( this, geometry, [ materialOuterAngle, materialInnerAngle ] );
 
+
 
+	this.update();
 
+
 
+}
 
+
 
+PositionalAudioHelper.prototype = Object.create( Line.prototype );
 
+PositionalAudioHelper.prototype.constructor = PositionalAudioHelper;
 
+
 
+PositionalAudioHelper.prototype.update = function () {
 
+
 
+	var audio = this.audio;
 
+	var range = this.range;
 
+	var divisionsInnerAngle = this.divisionsInnerAngle;
 
+	var divisionsOuterAngle = this.divisionsOuterAngle;
 
+
 
+	var coneInnerAngle = _Math.degToRad( audio.panner.coneInnerAngle );
 
+	var coneOuterAngle = _Math.degToRad( audio.panner.coneOuterAngle );
 
+
 
+	var halfConeInnerAngle = coneInnerAngle / 2;
 
+	var halfConeOuterAngle = coneOuterAngle / 2;
 
+
 
+	var start = 0;
 
+	var count = 0;
 
+	var i, stride;
 
+
 
+	var geometry = this.geometry;
 
+	var positionAttribute = geometry.attributes.position;
 
+
 
+	geometry.clearGroups();
 
+
 
+	//
 
+
 
+	function generateSegment( from, to, divisions, materialIndex ) {
 
+
 
+		var step = ( to - from ) / divisions;
 
+
 
+		positionAttribute.setXYZ( start, 0, 0, 0 );
 
+		count ++;
 
+
 
+		for ( i = from; i < to; i += step ) {
 
+
 
+			stride = start + count;
 
+
 
+			positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
 
+			positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
 
+			positionAttribute.setXYZ( stride + 2, 0, 0, 0 );
 
+
 
+			count += 3;
 
+
 
+		}
 
+
 
+		geometry.addGroup( start, count, materialIndex );
 
+
 
+		start += count;
 
+		count = 0;
 
+
 
+	}
 
+
 
+	//
 
+
 
+	generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
 
+	generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
 
+	generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );
 
+
 
+	//
 
+
 
+	positionAttribute.needsUpdate = true;
 
+
 
+	if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;
 
+
 
+};
 
+
 
+PositionalAudioHelper.prototype.dispose = function () {
 
+
 
+	this.geometry.dispose();
 
+	this.material[ 0 ].dispose();
 
+	this.material[ 1 ].dispose();
 
+
 
+};
 
+
 
+
 
+export { PositionalAudioHelper };