A-Frame可交互元素和动画效果的虚拟现实场景示例

web_icon

已于 2023-03-21 18:39:10 修改

阅读量851

点赞数

文章标签：交互 vr javascript

于 2023-03-21 18:21:27 首次发布

本文链接：https://blog.csdn.net/WANGLING0108/article/details/129694343

版权

本文提供了一个使用A-Frame创建的虚拟现实场景示例，场景中包含可交互的立方体、圆柱体和球体，应用了旋转和缩放动画。通过自定义JS组件，实现了元素对用户输入的响应，如鼠标悬停和点击事件。此外，还涉及到了纹理贴图和音频元素的使用。

摘要由CSDN通过智能技术生成

一、A-Frame示例，它演示了如何创建一个具有多个可交互元素和动画效果的虚拟现实场景。该场景包含摄像机、基本几何形状、纹理贴图、音频等要素

二、总结

一、A-Frame示例，它演示了如何创建一个具有多个可交互元素和动画效果的虚拟现实场景。该场景包含摄像机、基本几何形状、纹理贴图、音频等要素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    
    <!-- 自定义组件 -->
    <script>
      // 创建新的组件：“旋转器”
      AFRAME.registerComponent('rotator', {
        schema: { speed: { default: 1 } },
        tick: function (time, timeDelta) {
          var rotation = this.el.getAttribute('rotation');
          rotation.y += this.data.speed * timeDelta / 1000;
          this.el.setAttribute('rotation', rotation);
        }
      });
      // 创建新的组件：“点击放大缩小器”
      AFRAME.registerComponent('click-grow-shrink', {
        init: function () {
          var data = this.data;
          // 添加鼠标进入时执行函数
          this.el.addEventListener('mouseenter', function() {
            console.log("Mouse entered ", event.target);
            // 将对象放大并逐渐变暗
            this.object3D.scale.set(data.hoverScale,data.hoverScale,data.hoverScale); 
            TweenLite.to(this.material.color, .15, {r:.5,g:.5,b:.5});
           }.bind(this));
           // 添加鼠标离开时执行函数
           this.el.addEventListener('mouseleave', function() {
              console.log("Mouse left ", event.target);
              // 恢复原始大小和颜色值
              TweenLite.to(this.object3D.scale,.15,{x:1,y:1,z:1}); 
              TweenLite.to(this.material.color,.15,{r:this.originalColor.r,g:this.originalColor.g,b:this.originalColor.b});
             }.bind(this));
           
           //添加单击事件处理程序以触发操作（例如弹出警报框）
           if (this.el.getAttribute("onclick")){          
               let clickFunction= new Function( `return ${this.el.getAttribute("onclick")}`);
               console.log(clickFunction());
               clickFunction();
             }         
         },
         update:function(){
             const el=this.el;
             const originalSize=el.object3D.scale.x;
             
             if(!isNaN(parseFloat(el.getAttribute("data-hover-scale"))))
                el.setAttribute("data-hover-scale",parseFloat(el.getAttribute("data-hover-scale")));
                
             const hoverSize=el.hasAttribute && !isNaN(parseFloat(el.getAttribute("data-hover-scale"))) ? parseFloat(el.getAttribute("data-hover-scale")) : originalSize*2;             
              
              Object.assign(
                 el.components['click-grow-shrink'].originalColor,
                  {...el.getObject3D(`mesh`).material.color}
                );
              
              Object.assign(
                   el.components['click-grow-shrink'],
                    {hoverScale:hoverSize}
                  );  
         }
       });
       
       </ script >
   </ head >
   <body>
     <!-- 场景容器 -->
     <a-scene background="color:#ECECEC">
       <!-- 摄像机 -->
       <a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity>
       <!-- 环境光源 -->
       <!--<a-light type="ambient" color="#BBB"></a-light>-->
       
	   <!-- 方向光源 -->	   
	   <!--<a-light type='directional' intensity=".7" position="-4 -10 -10"></ a-light >-->
      
	  <!-- 音频播放器 -->   
	  <!--<audio id='myAudio' src='./music.mp3'></ audio >-->
	   <!—- 可交互元素：立方体 —->
	   	<a-box class='interactive'
			color='#FFC65D'
			position='-2 .5 -10'
			animation__rotate="
			  property:'rotation';
			  to:-360 0 0;
			  loop:true;
			  dur:50000;"
			 rotator ></ a-box >
		<!—- 可交互元素：圆柱体 —->
		<a-cylinder class='interactive'
		    color='#EF2D5E' 
		    height='2' radius='.75' segments-radial='20' position='-4 .75 -12'>
		  
		  <!— 在圆柱体上添加纹理贴图 —->
		  <!— 注意：需要在服务器上托管图片文件才能正常显示。-->
		  	
	      <!--<a-text value='' align=center scale='.8 .8 .8 'position='-11 -.9 -.9'>Click Me!</ a-text >-->	  
	      <!--<img src="./texture.jpg"/>-->	  
	      <!--<video autoplay loop muted playsinline crossorigin webkitPlaysInline style=”object-fit:none;width:auto;height:auto”>-->
	        <!--[if IE]>-->
	          <!--<source src="./texture.webm" type="video/webm">-->
	        <![endif]-->
	       <!--[if !IE]><!-->	        
	         <!--<source src="./texture.mp4" type="video/mp4">-->
	       <!--[endif]-->
	     </ a-cylinder >
	     <!—- 可交互元素：球体 —->     
	     < a-sphere class ='interactive '
		     color='#7BC8A4 '
		     radius ='1.25 '
		     segments-width ='20 '
		     segments-height ='20 '
		      position ='-.25 1.25 -6 '></ a-sphere >
		   <!— 添加音乐播放按钮（通过调用HTML Audio API） ->     
		   /*<button onclick="
		       var audio=document.getElementById(&#39;myAudio&#39;); 
		       audio.volume=.75;
		       audio.play();">Play Music</ button >*/
		   <!— 使用自定义组件将所有可交互元素设置为可以悬停并响应单击事件 ->
		    
		      /*const interactiveElements=document.querySelectorAll('.interactive');*/
			
		      Array.from(document.getElementsByClassName ('interactive')).forEach((element)=>{
		          element.setAttribute ("click-grow-shrink","");  
		          }); 
     </ a-scene >
   </ body >
</ html >

二、总结

这个例子展示了如何结合使用HTML、CSS和JavaScript来创建具有丰富交互性和视觉效果的虚拟现实应用程序。其中包含三种不同类型的可交互物品，分别是立方体、圆柱体和球形物品；每种物品都被赋予了不同的颜色以及旋转或缩放动画效果。
此外，还添加了自定义JS脚本来控制这些物品与用户输入之间进行响应，并对每个可交换项进行相应样式设置。
注意，由于涉及到加载视频文件等资源，请确保正确配置服务器环境或直接访问在线链接以查看完整功能演示。