aframe - 为什么这个 A-frame 代码在 Glitch.com 中有效,但在我的网站上无效?
问题描述
无法弄清楚为什么 A-frame 代码在我的 glitch.com here网站上有效,但在我的网站here上无效。它与复制和粘贴的代码完全相同。我的网站上的缩略图都显示为黑色,当您单击缩略图将您发送到不同的 360 度图像时,它会闪烁然后变黑。任何见解将不胜感激。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js"></script>
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
proxy-event="event: click; to: #image-360; as: fade"
sound="on: click; src: #click-sound"></a-entity>
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" crossorigin="anonymous" src="https://i.imgur.com/xeNv6sS.jpg">
<img id="city-thumb" crossorigin="anonymous" src="https://i.imgur.com/ibAztjF.gif">
<img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
<img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="cubes" crossorigin="anonymous" src="https://i.imgur.com/jWWrLUz.jpg">
<img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
</a-assets>
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#city"
animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls>
<a-cursor
id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
</body>
</html>
解决方案
推荐阅读
- performance - 为什么 FNV1a 一次散列数据是一个字节?
- python - Django ModuleNotFoundError:没有名为“myProject”的模块
- c# - List.remove() 在 C# 中不起作用
- azure - 即使我的作业运行没有错误,SSMS 中也没有出现任何数据
- grails - Requestmap 未按预期在 grails 中工作
- boost - CGAL - Microsoft Visual Studio 2013 -32 位 - 找不到以下静态 Boost 库:boost_thread、boost_system
- angular - 使用表单部件数组扩展 Angular6 动态表单示例
- c# - Linq 中这条 SQL 语句的等价物是什么?
- if-statement - Cassandra CQL - 如果不等于则更新(插入)
- c# - 如何在来自不同应用程序的表插入上将插入/更新/删除的条目添加到实体框架 DbContext?