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

代码语言: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 = SpeechGramma.........完整代码请登录后点击上方下载按钮下载查看

网友评论0