aframe-inspector
Version:
A visual inspector tool for A-Frame.
74 lines (65 loc) • 3.89 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Example Scene</title>
<!--<script>window.AFRAME_SAMPLE_ASSETS_ROOT = "./sample-assets/";</script>-->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@master/dist/aframe-master.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.4.0/dist/aframe-environment-component.min.js"></script>
<script>
AFRAME.registerComponent('models-array', {
schema: {
models: {type: 'array', oneOf: ['one', 'two', 'three', 'four']}
}
})
</script>
</head>
<body>
<a-scene debug="true">
<a-assets>
<a-mixin id="blue" material="color: #4CC3D9"></a-mixin>
<a-mixin id="blueBox" geometry="primitive: box; depth: 2; height: 5; width: 1" material="color: #4CC3D9"></a-mixin>
<a-mixin id="box" geometry="primitive: box; depth: 1; height: 1; width: 1"></a-mixin>
<a-mixin id="cylinder" geometry="primitive: cylinder; height: 0.3; radius: 0.75; segmentsRadial: 6"></a-mixin>
<a-mixin id="green" material="color: #7BC8A4"></a-mixin>
<a-mixin id="orange" material="color: #F16745"></a-mixin>
<a-mixin id="purple" material="color: #93648D"></a-mixin>
<a-mixin id="short" scale="1 0.5 1"></a-mixin>
<a-mixin id="yellow" material="color: #FFC65D"></a-mixin>
<img id="crateImg" src="https://aframe.io/sample-assets/assets/images/wood/crate.gif" crossorigin="true">
<img id="floorImg" src="https://aframe.io/sample-assets/assets/images/terrain/grasslight-big.jpg" crossorigin="true">
</a-assets>
<a-entity id="environment" environment="preset: forest; fog: 0"></a-entity>
<!-- Meshes. -->
<a-entity id="aBlueBox" mixin="blueBox" position="0 8 0"></a-entity>
<a-entity id="shortOrangeBox" mixin="short orange box" position="-5 2 0"></a-entity>
<a-entity id="shortYellowBox" mixin="short yellow box" position="5 2 0"></a-entity>
<a-entity id="redBox" geometry="primitive: box" material="color: #f00" position="-4 1 0" animation="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 9600"></a-entity>
<a-entity id="yellowSphere" geometry="primitive: sphere" material="color: #ff0; roughness: 1" position="-2 2 -2" models-array="models:one,two"></a-entity>
<a-box src="https://aframe.io/sample-assets/assets/images/bricks/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
<a-box id="aBox" position="0 2 0" height="2" color="#FFC65D"></a-box>
<!-- Models. -->
<a-entity class="boxClass" geometry="primitive: box" material="src: #crateImg" position="3 4 0"></a-entity>
<a-entity class="boxClass" geometry="primitive: box" material="color: #0f0" position="4 2 4"></a-entity>
<!-- Floor. -->
<a-entity id="floor" geometry="primitive: box; height: 0.2; depth: 24; width: 24"
material="src: #floorImg; color: #fafafa; metalness: 0.1; repeat: 50 20; roughness: 1"></a-entity>
<!-- Lights. -->
<a-entity id="pointLight" light="type: point; intensity: 0.25" position="0 3 3"></a-entity>
<!-- Camera. -->
<a-entity id="cameraWrapper" position="0 1.6 8">
<a-entity id="camera" camera look-controls wasd-controls>
<!-- Cursor. -->
<a-entity id="cursor" position="0 0 -2"
geometry="primitive: ring; radiusOuter: 0.016; radiusInner: 0.01"
material="color: #ff9; shader: flat; transparent: true; opacity: 0.5"
scale="2 2 2" raycaster>
</a-entity>
</a-entity>
</a-entity>
<a-entity id="leftHand" laser-controls="hand: left"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right"></a-entity>
</a-scene>
<script src="../dist/aframe-inspector.js"></script>
</body>
</html>