SpeechRecognition+aframe实现语音指令控制webvr场景运动效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：SpeechRecognition+aframe实现语音指令控制webvr场景运动效果代码

代码标签： SpeechRecognition aframe 语音指令控制 webvr 场景运动

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe.0.2.0.js"></script>
  
  

  
  
  
</head>


  <body>
    <a-scene light="defaultLightsEnabled: false " background="color: lightblue" shadow="autoUpdate: true">
      
	  
	 <a-assets>
			<img id="texture-metal" src="//repo.bfw.wiki/bfwrepo/icon/638ffc15de137.png"> 
			<img id="texture-plaster" src="//repo.bfw.wiki/bfwrepo/icon/63c68f9ad5e62.png">
	</a-assets>
		
		<a-entity id="player" collider-listener raycaster-emitter camera look-controls  wasd-controls="acceleration:100" position="0 1.8 5" >
			<a-entity  raycaster="objects: .collidable; showLine:true; lineColor:red; far:100; near:0.01;" position="0 1.8 0" rotation="0 90 0">
			</a-entity>
			 <a-cursor cursor-listener></a-cursor>
			<!--<a-entity camera look-controls position="0 1.6 0"></a-entity>-->
		</a-entity>
	
		<a-light type="directional" position="10 10 10" rotation="-90 0 0" target="#directionaltarget" shadow="cast:true">
			<a-entity id="directionaltarget" position="0 0 -1"></a-entity>
		</a-light>

		
		<a-plane position="0 0 0" rotation="-90 0 0" height="40" width="40" material="shader: flat; color:grey; " shadow="receive: true"></a-plane>
		
		<!--
		<a-box class="collidable" position="0 0 -10" rotation="0 0 0" depth="0.1" height="2" width="20" material="shader: flat; color:red;" ></a-box>
		
		<a-box class="collidable" position="0 0 -20" rotation="0 0 0" depth="0.1" height="4" width="40" material="shader: flat; color:black;" ></a-box>
		
		<a-box class="collidable" position="0 0 10" rotation="0 0 0" depth="0.1" height="2" width="20" material="shader: flat; color:blue;" ></a-box>
		
		<a-box class="collidable" position="10 0 0" rotation="0 90 0" depth="0.1" height="2" width="20" material="shader: flat; color:pink;" ></a-box>
		
		<a-box  class="collidable" position="-10 0 0" rotation="0 90 0" depth="0.1" height="2" width="20" material="shader: flat; color:yellow;" ></a-box>
		-->
		
		
		<a-box id="box1" position="-15 1 -10" depth="2" width="2" height="2" material="shader: flat; color:green " animation="property:rotation; from:0 360 0; to: 0 0 0;  duration: 10000; easing: linear; loop:true;"></a-box>
		<a-box id="box2" position="18 1 -16" depth="2" width="2" height="2" material="shader: flat;  color:gold " animation="property:rotation; from:0 360 0; to: 0 0 0;  duration: 10000; easing: linear; loop:true;"></a-box>
		<a-box id="box3" position="0 1 15" depth="2" width="2" height="2" material="shader: flat; color:red " animation="property:rotation; from:0 360 0; to: 0 0 0;  duration: 10000; easing: linear; loop:true;"></a-box>
		
		
		
		
		

	  
    </a-scene>

  
      <script >
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;

var grammar = '#JSGF V1.0; grammar colors; public <color> =  black | blue | brown | cyan | gray | green |  magenta |  orange | pink | purple | red | violet | yellow ;';
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;


recognition.lang = 'zh-CN';
recognition.interimResults = false;
recognition.maxAlternatives = 1;


var box = document.querySelector('#box1');
var player = document.querySelector('#player');
//recognition.stop();

document.body.onkeypress = function () {
  recognition.start();
};

recognition.onresult = function (event) {

  console.log(event.results[0][0].transcript);
  //var color = event.results[0][0].transcript;
  //box.setAttribute('color', color);

  positionHandling(event.results[0][0].transcript);
};

recognition.onspeechend = function () {
  recognition.stop();
};

recognition.onnomatch = function (event) {
  console.log("No match");
};

recognition.onerror = function (event) {
  console.log("error");
};


function positionHandling(command)
{
  var step = 2;

  if (command == '状态。' || command == '检查')
  {
    console.log('Rotation: ' + JSON.stringify(player.getAttribute('rotation')));
    console.log('Position: ' + JSON.stringify(player.getAttribute('position')));
  }



  if (command == '前进' || command == '后退')
  {
    var rotation = 0;
    var tempPosition = player.getAttribute('position');
    console.log("Current position: " + JSON.stringify(tempPosition));
    rotation = player.getAttribute('rotation').y % 360; // Rotation is increased while rotating left

    y = player.getAttribute('posi.........完整代码请登录后点击上方下载按钮下载查看