I'm trying to create many buildings using aframe-room-component. Is there a more DRY way to duplicate the rw-room entities than the method I'm currently using (literally just adding multiple rw-room's.
I've looked into writing a component in index.js, but I get confused by trying to incorporate the aframe-room-component.
<rw-room outside="true" position="0 0 -10" material="color: #866; side: double">
<rw-ceiling></rw-ceiling>
<rw-floor></rw-floor>
<rw-wall position="4 0 0"></rw-wall>
<rw-wall position="4 0 4"></rw-wall>
<rw-wall position="0 0 4"></rw-wall>
<rw-wall position="0 0 0">
<rw-doorhole id="holeA"></rw-doorhole>
<rw-doorlink from="#holeA" to="#holeB" position="2.5 0 0"></rw-doorlink>
</rw-wall>
</rw-room>
<rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
<rw-wall position=" 1 0 1" side="double" material="color:#877; side: double">
<rw-doorhole id="holeB"></rw-doorhole>
</rw-wall>
</rw-room>
<rw-room outside="true" position="-3 0 -10" rotation="0 180 0" material="color: #866; side: double">
<rw-ceiling></rw-ceiling>
<rw-floor></rw-floor>
<rw-wall position="4 0 0"></rw-wall>
<rw-wall position="4 0 4"></rw-wall>
<rw-wall position="0 0 4"></rw-wall>
<rw-wall position="0 0 0">
<rw-doorhole id="holeC"></rw-doorhole>
<rw-doorlink from="#holeC" to="#holeD" position="2.5 0 0"></rw-doorlink>
</rw-wall>
</rw-room>
<rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
<rw-wall position=" 1 0 1" side="double" material="color:#877; side: double">
<rw-doorhole id="holeD"></rw-doorhole>
</rw-wall>
</rw-room>
Hope this is clear enough and thank you in advance!
There's like:
The A-Frame template component https://www.npmjs.com/package/aframe-template-
component.
Or have a component that dumps into innerHTML as a string, building the template using regex or string replace. The string could optionally be defined via <template> tag.
Related
In one of the html files in an Angular13 application, I'm using an element that I'd like to supply the list of attributes and their values via the double-binding methods of Angular {{value of attribute}} so that a list of social media icons can be displayed.
For instance, instead of doing this hard-coding:
<!-- Twitter -->
<svg xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="cornflowerblue"
class="bi bi-twitter"
viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
I'd like to do this instead:
<svg xmlns="{{socBtn.xmlns}}"
width="{{socBtn.width}}"
height="{{socBtn.height}}"
fill="{{socBtn.fill}}"
class="{{socBtn.clss}}"
viewBox="{{socBtn.viewBox}}">
<path d="{{socBtn.pathD}}"/>
</svg>
but I keep getting the following error message:
error NG8002: Can't bind to 'xmlns' since it isn't a known property of ':svg:svg'.
xmlns="{{socBtn.xmlns}}"
I created a model interface for the list of Social Buttons that I want to display like this:
export interface SocialButton {
btnName: String;
href: String;
xmlns: String;
width: number;
height: number;
fill: String;
clss: String;
viewBox: String;
pathD: String;
}
And I'm reading those values from a JSON data file. All of that works as expected and I'm able to display the contents of the social buttons that I want to display by using a simple *ngFor loop:
<ul>
<li *ngFor="let socBtn of socBtns">
<a class="ml-2 {{socBtn.clss}}"
target="_blank"
href="{{socBtn.href}}"
title="{{socBtn.btnName}}">
{{socBtn.btnName}}
</a>
<ul>
<li>class: {{socBtn.clss}}</li>
<li>href: {{socBtn.href}}</li>
<li></li>
<li>svg.xmlns: {{socBtn.xmlns}}</li>
<li>svg.height: {{socBtn.height}}</li>
<li>svg.width: {{socBtn.width}}</li>
<li>svg.viewBox: {{socBtn.viewBox}}</li>
<li>svg.fill: {{socBtn.fill}}</li>
<li></li>
<li>Full Strings:</li>
<li>svg {{ socBtnSvgs[i] }}</li>
<li>path {{socBtnPths[i]}}</li>
</ul>
</li>
</ul>
The loop outputs the following for the Twitter social button:
Twitter
class: bi bi-twitter
href: https://twitter.com/wmmaintz
svg.xmlns: http://www.w3.org/2000/svg
svg.height: 16
svg.width: 16
svg.viewBox: 0 0 16 16
svg.fill: cornflowerblue
Full Strings:
xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-twitter" o fill="cornflowerblue" viewBox="0 0 16 16"
"M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
As one can see, I also tried combining all of the attributes into two long strings, socBtnSvgs[i] and socBtnPths[i], so that I could then use them this way:
<svg {{ socBtnSvgs[i] }}>
<path d={{ socBtn.pathD[i] }}/>
</svg>
That doesn't generate output and the following error appears in the developers window:
ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name.
And when I change it to just use the variable name without the double braces like this:
<svg "socBtnSvgs[i]">
<path d="socBtnPths[i]"/>
</svg>
it generates an error as well. I then tried using the <use> statement so that I could isolate the path statement and eliminate the double braces:
<svg>
<use xlink:xlink="socBtnSvgs[i]"/>
<path d="socBtnPths[i]"/>
</svg>
but that still generates an error, although a more encouraging one:
platform-browser.mjs:605 Error: attribute d: Expected moveto path command ('M' or 'm'), "socBtnPths[i]".
I found this more encouraging although what it was complaining about (that it expected an 'M', moveto path command) is, in fact, included in the contents of the socBtnPths[0] variable ("M5.026 15c6 ... ").
So, I'm at a loss as to what try next. Any ideas on how I can use these values with the svg element?
The duplicate reference provided was helpful: I solved the problem by preceding each attribute definition with the attr keyword and enclosing it in square brackets, i.e. [attr.xmlns]="socBtn.xmls".
Here's the end result:
<svg
[attr.xmlns]="socBtn.xmlns"
[attr.width]="socBtn.width"
[attr.height]="socBtn.height"
[attr.fill]="socBtn.fill"
[attr.class]="socBtn.clss"
[attr.viewBox]="socBtn.viewBox">
<path [attr.d]="socBtn.pathD"/>
</svg>
Thank you sooooo much!
I have whittled down the project to only to the items that are affected by my problem. It can be found here:
https://glitch.com/edit/#!/lean-luxuriant-vegetable
if you look around, you will notice that the cursor is hidden behind the 3d-model. This also happens if I use a cursor primative. The cursor is not hidden behind other models in the scene when I have the whole thing all together, it is only thins one. Why would this be happening?
The "ring" cursor from the docs:
<a-entity camera look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"></a-entity>
</a-entity>
is a combination of:
The visual element (ring geometry, and material components)
The cursor functionality (the cursor component)
The ring is nothing but another 3D entity in the scene, and it will be covered by anything thats closer to the camera:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat;">
</a-entity>
</a-entity>
</a-scene>
You can tell the material, that you don't want it to be affected by the depth buffer (simply put, we don't want to check if something is covering our material) with the depthTest property of the material.
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
But the cursor component is to far to register the box (as it's literally inside the box), so you can split the functionality from the visual, and make the cursor closer:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"
color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -.001"></a-entity>
<a-entity position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
So we've both the ring visible, and the functinality.
Why not make everything closer then? I had some visual issues with scaling when stuff was 1mm from the camera. Doesn't mean it'll bother you, but if so - the above way deals with it.
I have an svg to be used on my blazor where loading is slow, the image is small it weighs about 4KB.
This slowdown only happens when I call the svg file in an image element
If I put the svg code directly, the loading is extremely fast.
But to keep code clean I prefer to use the svg file, is there any way to make this load faster?
Code that loads slowly:
<div>
<img srcset="imgs/mysvgtest.svg"/>
</div>
Code that has fast loading:
<div>
<svg>
<g>
...
</g>
</svg>
</div>
MySvg Test
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756">
<g fill-rule="evenodd" clip-rule="evenodd">
<path fill="#fff" d="M0 0h192.756v192.756H0V0z"/>
<path d="M37.624 101.055c0 11.686-3.715 23.734-17.395 23.734S2.834 112.74 2.834 101.055c0-11.688 3.714-23.828 17.395-23.828 13.68 0 17.395 12.14 17.395 23.828zm-22.016 0c0 2.627.182 12.32 4.621 12.32s4.62-9.693 4.62-12.32c0-2.629-.181-12.322-4.62-12.322s-4.621 9.693-4.621 12.322zM55.909 85.2h.182c1.721-4.349 5.617-7.973 10.6-7.973 9.422 0 8.607 10.509 8.607 17.123v29.533H62.523V98.789c0-2.355.906-8.697-3.171-8.697-2.899 0-3.443 2.989-3.443 5.254v28.536H43.135v-45.75h12.774V85.2zM94.311 50.774v73.109H81.537V50.774h12.774zM113.244 78.133v45.75h-12.773v-45.75h12.773zM98.748 64.454c0-4.62 3.715-8.063 8.336-8.063 4.439 0 7.881 3.896 7.881 8.244 0 4.349-3.715 8.063-8.152 8.063-4.44 0-8.065-3.715-8.065-8.244zM132.27 85.2h.182c1.721-4.349 5.617-7.973 10.6-7.973 9.422 0 8.607 10.509 8.607 17.123v29.533h-12.775V98.789c0-2.355.906-8.697-3.17-8.697-2.898 0-3.443 2.989-3.443 5.254v28.536h-12.773v-45.75h12.773V85.2h-.001zM189.605 104.406h-20.201c.09 3.352-.092 10.6 4.801 10.6 3.262 0 4.076-2.537 4.076-5.256h10.871c-1.086 8.426-5.162 15.039-14.494 15.039-12.955 0-17.576-11.506-17.576-22.83 0-10.961 3.986-24.732 17.305-24.732 8.424 0 16.217 7.52 15.492 21.923l-.274 5.256zm-10.779-8.969c0-2.989-.635-8.425-4.621-8.425-3.896 0-4.711 5.254-4.711 8.153v1.358h9.332v-1.086zM3.753 129.209h185.601v12.773H3.753v-12.773z"/>
<path fill="#fff" d="M7.424 130.76v9.484H5.55v-9.484h1.874zM10.808 130.76l2.339 5.723.025-.025a5.977 5.977 0 0 1-.15-1.434v-4.264h1.874v9.484h-1.773l-2.314-5.723-.025.023.088.957.012.391v4.352H9.01v-9.484h1.798zM20.824 130.76v1.761H19.34v7.723h-1.874v-7.723h-1.472v-1.761h4.83zM25.705 130.76v1.761h-1.9v2.063h1.673v1.76h-1.673v2.138h1.925v1.762h-3.799v-9.484h3.774zM27.114 140.244v-9.484H29c1.195 0 3.333.127 3.333 2.717 0 1.045-.416 1.938-1.346 2.453l1.647 4.314h-1.975l-1.647-4.377h-.025v4.377h-1.873zm1.874-5.408l.327.012c.855 0 1.194-.578 1.194-1.359 0-.678-.327-1.23-1.27-1.182h-.251v2.529zM35.832 130.76l2.34 5.723.024-.025a5.977 5.977 0 0 1-.151-1.434v-4.264h1.874v9.484h-1.773l-2.314-5.723-.025.023.088.957.013.391v4.352h-1.874v-9.484h1.798zM45.269 130.76v1.761h-1.9v2.063h1.673v1.76h-1.673v2.138h1.924v1.762h-3.797v-9.484h3.773zM51.03 130.76v1.761h-1.484v7.723h-1.874v-7.723H46.2v-1.761h4.83zM59.081 130.76l2.276 9.484h-2l-.352-1.598h-1.899l-.34 1.598h-1.861l2.201-9.484h1.975zm-.831 3.873l-.214-1.434h-.025l-.201 1.434-.402 2.529h1.32l-.478-2.529zM62.365 140.244v-9.484h1.886c1.194 0 3.333.127 3.333 2.717 0 1.045-.415 1.938-1.346 2.453l1.647 4.314h-1.974l-1.648-4.377h-.025v4.377h-1.873zm1.874-5.408l.327.012c.855 0 1.195-.578 1.195-1.359 0-.678-.327-1.23-1.271-1.182h-.252v2.529h.001zM69.284 140.244v-9.484h1.836c.73 0 1.359.025 1.962.516.628.504.968 1.346.968 2.139 0 .842-.314 1.484-1.019 1.961.78.379 1.17 1.385 1.17 2.201 0 1.875-1.384 2.668-3.094 2.668h-1.823v-.001zm1.874-4.139v2.566c.755.037 1.195-.516 1.195-1.309 0-.741-.453-1.282-1.195-1.257zm0-3.773v2.314c.705 0 1.119-.479 1.119-1.195 0-.691-.402-1.156-1.119-1.119zM79.333 130.76v1.761h-1.899v2.063h1.673v1.76h-1.673v2.138h1.925v1.762H75.56v-9.484h3.773zM82.617 130.76v9.484h-1.874v-9.484h1.874zM88.554 130.76v1.761H87.07v7.723h-1.874v-7.723h-1.471v-1.761h4.829zM93.56 132.898c-.376-.328-.842-.604-1.358-.604-.579 0-.943.352-.943.93 0 1.561 2.854 1.648 2.854 4.213 0 1.686-.968 2.957-2.729 2.957-.527 0-1.182-.164-1.609-.479v-1.785c.44.301.868.502 1.421.502.604 0 1.082-.402 1.082-1.031 0-.729-.578-1.006-1.107-1.383-1.082-.73-1.749-1.434-1.749-2.818 0-1.496.868-2.791 2.479-2.791.604 0 1.144.164 1.659.465v1.824zM101.537 134.961v.742c0 2.012-.49 4.691-3.043 4.691-2.554 0-3.384-2.742-3.384-4.842 0-2.189.705-4.943 3.384-4.943 1.445 0 2.389.904 2.791 2.252l-1.822.703c-.09-.479-.24-1.219-.957-1.219-1.271-.076-1.396 2.264-1.396 3.156 0 .98.062 3.156 1.447 3.156.955 0 1.105-1.283 1.105-1.936h-1.193v-1.762h3.068v.002zM102.785 140.244v-9.484h1.887c1.195 0 3.334.127 3.334 2.717 0 1.045-.416 1.938-1.346 2.453l1.646 4.314h-1.975l-1.646-4.377h-.025v4.377h-1.875zm1.875-5.408l.326.012c.855 0 1.195-.578 1.195-1.359 0-.678-.326-1.23-1.27-1.182h-.252v2.529h.001zM111.529 130.76v6.139c0 .717-.09 1.799.93 1.799.918 0 .918-.693.932-1.396v-6.541h1.873v6.918c0 1.006-.113 2.717-2.816 2.717-1.748 0-2.793-.818-2.793-2.592v-7.043h1.874v-.001zM116.801 140.244v-9.484h1.951c.402 0 3.219-.252 3.219 2.805 0 1.773-1.145 2.793-2.881 2.793l-.414-.025v3.912h-1.875v-.001zm1.875-5.433c.906.037 1.422-.303 1.422-1.271 0-.678-.266-1.232-1.07-1.232h-.352v2.503zM123.18 140.244v-9.484h1.949c.402 0 3.221-.252 3.221 2.805 0 1.773-1.145 2.793-2.881 2.793l-.416-.025v3.912h-1.873v-.001zm1.873-5.433c.906.037 1.422-.303 1.422-1.271 0-.678-.264-1.232-1.068-1.232h-.354v2.503zM133.33 130.76v1.761h-1.898v2.063h1.672v1.76h-1.672v2.138h1.923v1.762h-3.798v-9.484h3.773zM138.074 140.244v-9.484h1.887c1.193 0 3.332.127 3.332 2.717 0 1.045-.414 1.938-1.346 2.453l1.648 4.314h-1.975l-1.648-4.377h-.025v4.377h-1.873zm1.873-5.408l.328.012c.855 0 1.193-.578 1.193-1.359 0-.678-.326-1.23-1.27-1.182h-.252v2.529h.001zM148.766 130.76v1.761h-1.899v2.063h1.672v1.76h-1.672v2.138h1.924v1.762h-3.799v-9.484h3.774zM152.049 130.76v9.484h-1.873v-9.484h1.873zM157.986 130.76v1.761h-1.484v7.723h-1.873v-7.723h-1.473v-1.761h4.83zM160.967 130.76v3.711h1.9v-3.711h1.873v9.484h-1.873v-4.014h-1.9v4.014h-1.873v-9.484h1.873zM169.938 130.76l2.277 9.484h-2l-.352-1.598h-1.9l-.338 1.598h-1.861l2.199-9.484h1.975zm-.831 3.873l-.213-1.434h-.025l-.201 1.434-.402 2.529h1.32l-.479-2.529zM175.098 130.76v7.722h1.961v1.762h-3.836v-9.484h1.875zM180.041 130.76v7.722h1.961v1.762h-3.836v-9.484h1.875zM186.883 130.76v1.761h-1.901v2.063h1.674v1.76h-1.674v2.138h1.926v1.762h-3.799v-9.484h3.774z"/>
</g>
</svg>
I'm having trouble trying to load multiple models for my project. I have a black hole model and a galaxy model, both in gltf format, however, the second model is failing to load. IS it just that I can only load a single model? Or am I doing something wrong?
Here is part of my code.
<a-assets>
<a-asset-item id="blackhole" src="source1.gltf"></a-asset-item>
<a-asset-item id="galaxy" src="source2.gltf"></a-asset-item>
</a-assets>
<a-entity position="0 0 0" scale="0.06 0.06 0.06" animation-mixer gltf-model="#blackhole">
<a-animation delay="12000" attribute="scale" to="0 0 0" easing="linear" dur="8000"></a-animation>
</a-entity>
<a-enitiy position="0 0 0" scale="0.01 0.01 0.01" gltf-model="#galaxy"></a-enitiy>
Earliest information I could find on this was from 2017.
I have multiple pages linked in A-Frame but whenever the user goes to the next page it kicks them out of VR Mode. Is link traversal supported well in 2019 or am I missing something? Is it possible for the user to go from page to page in VR without being kicked out?
Any help is greatly appreciated.
<a-scene>
<a-assets>
<img id="box" src="img/white.jpg">
<img id="stroke" src="img/stroke.png">
<img id="cityhall" src="img/cityhall.jpg">
<img id="clock" src="img/clock.jpg">
<img id="titanic" src="img/titanic.jpg">
<img id="logo" src="img/logo.png">
<img id="shadow2" src="img/radial-shadow-2.png">
<img id="background" src="img/360background.jpg">
</a-assets>
<a-image radius="5.7" position="0 -5 0" src="#shadow2" rotation="-90 0 0" scale="6 6 6"></a-image>
<!-- CURSOR ENTITY -->
<a-entity rotation="-10 0 0" position="0 0 0">
<a-entity id="camera" camera look-controls rotation="0 0 0" wasd-controls>
<!-- MAIN CURSOR -->
<a-entity cursor="fuse: true; maxDistance: 500; timeout: 3000;" id="cursor-main" position="0 0 -2" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;" material="color: #439DC2;">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"></a-animation>
</a-entity>
<a-entity id="cursor-loader" position="0 0 -2.0001" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03;" material="color: #2ADD2A;">
</a-entity>
</a-entity>
</a-entity>
<a-sky src="#background"></a-sky>
</a-scene>
Chrome doesn't work. Link traversal WebVR specification is only supported by Firefox, Samsung Internet, Oculus Browser and Supermedium.