My website's speed is limited by importing the whole a-frame library which is huge using import aframe. I am only using a-frame to view a 360 image embedded on my web page. The components I use are:
<a-scene embedded style={aScene}>
<a-sky src={canvasToFile()} rotation="0 -90 0" />
<a-camera look-controls="reverseMouseDrag: true" />
</a-scene>
Is it possible for me to import only the specific components I need i.e. import { 'a-scene', 'a-sky', 'a-camera' } from aframe?
Related
Is it possible to move camera in A-Frame projects with Oculus touch controllers?
Can't find any working example.
You can try and re-use existing components. wasd-controls are working well for movement, so You can write a similar component utilizing the thumbstick input instead of the wasd keys.
You can try out my barbaric attempt here(docs).
It's quite simple - create a rig for the controllers + camera and attach oculus-thumbstick-controls to any controller:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/controls/oculus-thumbstick-controls.js"></script>
<a-scene>
<!-- Camera + controllers rig -->
<a-entity id="rig">
<a-camera position="0 1.6 0"></a-camera>
<a-entity oculus-touch-controls="hand: left" ></a-entity>
<a-entity oculus-touch-controls="hand: right" oculus-thumbstick-controls></a-entity>
</a-entity>
</a-scene>
I'm trying to make a simple arjs application based on the tutorials on the website, specifically this one
I've been able to successfully swap out other gltf models for new codes, but whenever I try to use my own models they do not display in the application.
I've tested my model in the viewer at https://gltf-viewer.donmccurdy.com/ and it shows up fine.
My code is below.
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"></a-asset-item>
<a-asset-item id="bimmer" src="https://raw.githubusercontent.com/jaggre/consortium/master/compresso.gltf"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='2'>
<a-entity
animation-mixer
gltf-model="#bimmer"
scale="4 4 4">
</a-marker>
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
animation-mixer
gltf-model="#animated-asset"
scale="2 2 2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Check in your console for any Cross origin Resource Sharing errors - sometimes if your website is hosted via http or set up differently it doesn't work. see https://aframe.io/docs/1.0.0/core/asset-management-system.html#cross-origin-resource-sharing-cors and https://aframe.io/docs/1.0.0/introduction/installation.html#use-a-local-server . If you just use the file:// protocol as you are testing it may not work.
Other things you could try is moving the model's a-entity tag outside of the marker tag to see if the marker class is having an effect on it. perhaps check the A-frame inspector (Ctrl Alt I) and poke around if it's just displaying in the wrong place.
Update: gltf2.0 not showing in ar.js project seems like a similar question. Perhaps try it's answers too.
I just started with ar.js for my presentation and got in problem with one of my model loading, I can see only cube on my screen.
While with other model it is actually there( second code ).
Tried with different scale factors and all is the same, different model and its ok.
Model that Im tring to get is loading normal on computer program that opens .obj could size of model be problem, .obj is around 35Mb.
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/ar.js/master/namtalica2.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"
<a-entity scale="0.01 0.01 0.01"></a-entity>
></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
<a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
</a-scene>
</body>
Code that works is with
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/kanu/master/rezac2.mtl"></a-asset-item>
</a-assets>
models load much more reliably as .gltf format.
download the obj model and convert it to gltf format.
There are many converters online. Here is one:
https://www.khronos.org/news/permalink/new-drag-and-drop-to-convert-obj-models-to-gltf
place the gltf file on your server and use that url in your a-assets file.
Your original obj file looks like it might be inside of a js file.
Kanu-1988/ar.js/master/namtalica2.obj
ar.js could be a bad file path that is being parsed as a js file.
Thanks guys for the reply, managed to "get" model, it was off center so it was outside camera range, scale it a bit more in blender and now is in range, have to centered it a bit more and planning to add rotate and zoom function.
this is how it looks now
Here is current code:
<a-assets>
<a-asset-item id="tree-obj" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="https://raw.githubusercontent.com/Kanu-1988/T2/master/u5.mtl"></a-asset-item>
I have the following code in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Alchem Figher!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<!-- Scripts -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system#1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="jquery.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
<a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
</a-text>
<a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
<a-sphere id="eclouds1e1" radius=".53" color="#02e8f4" opacity=".4">
<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
<a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
<a-animation attribute="geometry.radius" dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
</a-entity>
</a-sphere>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
</a-scene>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
The torus id'd: s1e1
In here, <a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >, it has two animations attached to it. One for left to right movement, and another for expanding and contracting.
The question:
I would like these animations to synchronize so that the torus is expanded in the middle and contracted at the ends. It represents a visualization of an electron orbiting a single proton in a hydrogen atom, but I do not know how to approach that.
I was in the process of typing up a response, suggesting the use of the animation component (included in 0.9.0 core) rather than a-animation (deprecated, and removed in 0.9.0), which I would still recommend in general practice, but I realized that the animations still do in fact fall out of sync.
I'm assuming this is due to any of the following:
The extremely short interval (dur). The higher you set this, the less noticeable the timing issue.
A difference in overhead due to how the animated properties are targeted, e.g., raw property vs. attribute (using setAttribute under the hood).
IIRC, loops are set with either setTimeout or setInterval under the hood. Rather than rely on this, you may want to disable looping and trigger these animations by emitting a timed event so you can guarantee that they're executed simultaneously. You can create a custom component that does this using a throttled tick handler, setTimeout or setInterval.
I also suggest using either linear or easeInOutQuad for the easing as the default setting only eases in one direction, which can cause an undesirable effect.
Either way, you may want to submit this as a bug to the A-Frame repo: https://github.com/aframevr/aframe/issues/new
I'm trying to include a STL file like a GLTF object in my A-Frame page, but I'm not making progress. I don't understand why the file doesn't work in a similar manner. Here is my code for the working page on Glitch with a GLTF file and a non-working one with the STL file. All object files are hosted on GitHub.
glitch.com/edit/#!/dramatic-hornet
(below is the non-working code excerpt copied from Glitch)
<a-scene>
<a-assets>
<a-asset-item id="object" src="https://github.com/rschildge/models/raw/master/NinjaSpinner.stl"></a-asset-item>
</a-assets>
<a-entity model="#object" position="0 0 -4" scale=".1 .1 .1"></a-entity>
<!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
As far as i know, a-frame's core doesn't have any loader for the .stl format.
There is a pretty recent community-made loader, be sure to check it out.
If it won't work, be sure to file an issue. If it works - give it a friendly star.
As for models in general, the a-frame team recommends the glTF format in the docs, as it is designed for webGL.
As for the model=.. syntax, you need to use a loader component, either the gltf-loader (like you do on glitch), or any other, but it won't work just with a model keyword