利用Aframe官网案例的数据，模仿了一下官方案例。

完成链接

学习过程

记录一下学习过程。📃📃📃

引入资源

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

主要用到的就是这个场景文件，
问：js到底起了什么作用？？？？
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>

创建a-assets

方便数据缓存，调用数据，通过id选择器。

<a-assets>
	<img id="arches" src="./img/arches.jpg">
	<img id="contact" src="./img/contact.jpg">
	<img id="dream" src="./img/dream.jpg">
	<img id="egypt" src="./img/egypt.jpg">
	<img id="forest" src="./img/forest.jpg">
	<img id="goaland" src="./img/goaland.jpg">
	<img id="goldmine" src="./img/goldmine.jpg">
	<img id="japan" src="./img/japan.jpg">
	<img id="tron" src="./img/tron.jpg">
	<img id="poison" src="./img/poison.jpg">
	<img id="volcano" src="./img/volcano.jpg">
	<img id="yavapai" src="./img/yavapai.jpg">
	
	<audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
	
	<!-- <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item> -->
	<a-asset-item id="cityModel" src="./model/model.glb"></a-asset-item>
</a-assets>

设置交互点

通过camera，嵌套cursor，实现中心点射线交互。
屏幕中心会出现一个圆圈，可以与物体交互，也可以改变圆圈的颜色，增加用户体验。

1
2
3

<a-camera>
	<a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
</a-camera>

创建交互按钮

创建一系列球体，用position控制位置。注意xyz轴的朝向
制作鼠标移入移出的放大效果，
设置鼠标点击后的声音

这个声音会根据点击的距离来判断大小，距离近，声音大，距离远，声音小！！！

这里是通过clickable这个class来实现事件绑定，在循环中设置交互事件。

<a-sphere id = 'test' class="clickable" src='#arches' position='0 2 15'
			animation="property: rotation; to: 0 360 0; dir: alternate; dur: 20000; loop: true" name='001'
			animation__mouseenter="property: scale; to: 1.8 1.8 1.8; dur: 300; startEvents: mouseenter"
			animation__mouseleave="property: scale; to: 1 1 1; dur: 300; startEvents: mouseleave"
			sound="on: click; src: #click-sound"></a-sphere>
			
			
var sphere = document.querySelectorAll('.clickable');  // 全部获取
console.log('sphere', sphere)
for(let i = 0; i < sphere.length; i++) {
	console.log('test001', sphere[i].getAttribute('src'))
	sphere[i].onclick = (evt) => {
		let temp = evt.srcElement.components.material.attrValue.src; // 通过查找数据信息得到当前球所带的信息
		temp = temp.substring(1) // 去掉前面的#
		console.log(temp)
		entityEl.setAttribute('environment', { // 设置场景的信息，转换场景
			preset: `${temp}`,
			// dressingAmount: 500 // 设置场景的密度。
		});
		
	}
}

场景初始化

在一开始的时候，加载模型，后面的模型切换，通过点击事件。


var sceneEl = document.querySelector('a-scene'
AFRAME.registerComponent('do-something-once-loaded', {
	init: function() {
		// This will be called after the entity has properly attached and loaded.
		console.log('I am ready!');
	}
});

var entityEl = document.createElement('a-entity');
	entityEl.setAttribute('do-something-once-loaded', '')
	entityEl.setAttribute('environment', {
		preset: `tron`,
		// dressingAmount: 500
	});
	sceneEl.appendChild(entityEl);

加载模型

利用现有模板，加载模型，
模型来源，官网案例，按f12下载。
利用aframe的调试工具，调整模型位置 - 按ctrl + alt + i 跳出调整页面。

加载模型模板
<script>
  AFRAME.registerComponent('modify-materials', {
    init: function () {
      // Wait for model to load.
      this.el.addEventListener('model-loaded', () => {
        // Grab the mesh / scene.
        const obj = this.el.getObject3D('mesh');
        // Go over the submeshes and modify materials we want.
        obj.traverse(node => {
          if (node.name.indexOf('ship') !== -1) {
            node.material.color.set('red');
          }
        });
      });
    }
  });
</script>

<a-scene background="color: #ECECEC">
  <a-assets>
	// 修改这里的src即可。
    <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#cityModel" modify-materials></a-entity> // 
</a-scene>

后续功能

添加交互动画，如导弹发射，粒子动画等。

总结收获

按f12，通过字符串改变场景的时候，很神奇，整个场景的切换是通过改变字符串来是实现的。
在找当前物体所带的数据的时候，花了一些时间，成功找到需要的信息。

阅读文档 + 模仿 + 实践，在学习新内容方面，很有意义！🛒🛒🛒