A-Frame在线教程 - 交互事件集组件代码示例

Event Set for Interactions - A-Frame

webvr, a-frame, events

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4508
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Event Set for Interactions - A-Frame</title>
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" event-set__down="_event: mousedown; scale: 1.2 1.2 1.2" event-set__up="_event: mouseup; scale: 1 1 1" event-set__leave="_event: mouseleave; scale: 1 1 1"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" event-set__enter="_event: mouseenter; _target: #cylinderText; visible: true" event-set__leave="_event: mouseleave; _target: #cylinderText; visible: false">
            <a-text id="cylinderText" value="This is a cylinder" align="center" color="#FFF" visible="false" position="0 -0.55 0.55" geometry="primitive: plane; width: 1.75" material="color: #333"></a-text>
        </a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" event-set__down="_event: mousedown; material.wireframe: true" event-set__up="_event: mouseup; material.wireframe: false" event-set__leave="_event: moulseleave; material.wireframe: false"></a-plane>
        l
        <a-camera>
            <a-cursor></a-cursor>
        </a-camera>

<a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>

</html>

Event Set for Interactions - A-Frame

webvr, a-frame, events

编辑器支持Emmet

快捷键

Event Set for Interactions - A-Frame

webvr, a-frame, events

WebVR A-Frame教程：实体-组件-系统完整实例在线演示

A-Frame WebVR框架应用程序代码实例：基础模型、skybox和动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：