aframe-connecting-line
Version:
Uses the A-Frame "line" component to draw a line between points on two entities.
99 lines (87 loc) • 3.05 kB
HTML
<html>
<head>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="../index.js"></script>
<link rel="stylesheet" href="../../../../styles.css">
<script>
let startOK = true
let endOK = true
const startToggle = () => {
const el = document.getElementById('lineEl')
const start = document.getElementById('point1')
if (startOK) {
el.setAttribute('connecting-line', {start: '#no-start'})
start.setAttribute('color','#f00')
startOK = false
}
else {
el.setAttribute('connecting-line', {start:'#point1'})
start.setAttribute('color','#0f0')
startOK = true
}
}
const endToggle = () => {
const el = document.getElementById('lineEl')
const end = document.getElementById('point2')
if (endOK) {
el.setAttribute('connecting-line', {end: '#no-end'})
end.setAttribute('color','#f00')
endOK = false
}
else {
el.setAttribute('connecting-line', {end:'#point2'})
end.setAttribute('color','#0f0')
endOK = true
}
}
</script>
</head>
<body>
<div class="text-overlay">
<p>connecting-line: Test non-existing start / end points</p>
<p>Use bottons on the right to toggle validity of references to start and end elements.</p>
</div>
<a class="code-link" target="_blank"
href="https://github.com/diarmidmackenzie/aframe-components/blob/main/components/connecting-line/test/event-updates.html">
view code
</a>
<div class="buttons">
<button onClick="startToggle()">
Start toggle
</button>
<button onClick="endToggle()">
End toggle
</button>
</div>
<a-scene background="color:black">
<a-mixin id="animate-right" animation="property:position;
from: 0 0 0;
to: 0.5 0 0;
dir: alternate;
loop: true">
</a-mixin>
<a-mixin id="animate-left" animation="property:position;
from: 0 0 0;
to: 0 0.5 0;
dir: alternate;
loop: true">
</a-mixin>
<a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
<a-entity id="container" position="0 0 -4">
<a-entity position="0 0 0">
<a-entity mixin="animate-left">
<a-sphere id="point1" position="-1 0 0" radius="0.1" color="#0f0"></a-sphere>
</a-entity>
<a-entity mixin="animate-right">
<a-sphere id="point2" position="1 0 0" radius="0.1" color="#0f0"></a-sphere>
</a-entity>
</a-entity>
</a-entity>
<a-entity id="lineEl" connecting-line="start:#point1;
end:#point2;
color:red">
</a-entity>
</a-scene>
</body>
</html>