i am new about aframe and arjs, i would to show my own gltf models over an hiro path, i write this code:
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- define your gltf asset -->
<!--This is for add a text-->
<a-text value="Hello, World!"></a-text>
<a-assets>
<a-asset-item id="tree" src="models/gltf/manovella.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="##tree"></a-entity>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
when i run my code and lace an hiro marker from of the cam i just see "Hello world!" text and not my own model, i check browser console error but i don't gen anything.
Someone can help me about? Where i was wrong for load my own model?
so many thanks in advance
Try using A-Frame version 0.8.2. And as Stéphane Albanese mentioned, you have an extra # in ##tree
Related
I want to add follow camera which will follow the object when I move it. As I am using a networked a-frame so my object is in the template.
<a-assets>
<a-asset-item id="bee" src="./bee/scene.gltf"></a-asset-item>
</a-assets>
This is model.
<template id="bee-template">
<a-entity
id="fly"
gltf-model="#bee"
animation-mixer="clip: Rig|bee_idle"
scale="0.02 0.02 0.02"
look-controls
wasd-controls
>
</a-entity>
</template>
This is a template that I'm adding to the networked scene.
<a-entity
id="model"
networked="template:#bee-template;attachTemplateToLocal:false;"
position="0 1 0"
spawn-in-circle="radius:3"
wasd-controls="acceleration: 10"
look-controls
>
</a-entity>
So, by using this I want that camera to follow bee. Please help in this!
In my AR project I use arjs with aframe to make my gltf object visibe when I point with my phone camera on my hiro pattern:
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls#1.2.0/dist/aframe-orbit-controls.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- define your gltf asset -->
<!--This is for add a text-->
<!--<a-text value="Hello, World!"></a-text>-->
<!--This is for add an image-->
<!--<a-image src="another-image.png"></a-image>-->
<a-assets>
<a-asset-item id="tree" src="models/gltf/manovella.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#tree" position="0 0 0" rotation="0 90 0" scale="10 10 10"></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15">
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-entity>
</a-scene>
</body>
when I point to my marker all was done, the problem is then also when I start my app without pointing to any market the object appears and when I no longer see the marker in the frame, the object remains on the screen.
How can I manage my gltf show/hide only related to my marker?
So many thanks in advance
Your object should be inside your marker. Try to use this in your scene:
<a-assets>
<a-asset-item id="tree" src="models/gltf/manovella.gltf"></a-asset-item>
</a-assets>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'><a-entity gltf-model="#tree" position="0 0 0" rotation="0 90 0" scale="10 10 10"></a-entity></a-marker-camera>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15"></a-entity>
I am new to ar.js and Aframe, i wrote a simple code form displat on a hito pattern a gltf objct:
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- define your gltf asset -->
<a-assets>
<a-asset-item id="tree" src="models/gltf/manovella.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#tree"></a-entity>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
All works dine, my object become visible but is so small and wrong positioned:
i try to search in aframe documentation about a-asset-item but cannot find anityng about position dimension and rotation.
Someone can help me for understand how manage apparence of my object?
So many thanks in advance
All <a-entity> elements in A-Frame have position, rotation and scale components that you can use to manage your model like any entity. You can use them like this :
<a-entity gltf-model="#tree" position="0 3 0" rotation="0 90 0" scale="3 3 3"
If you didn't read it yet, there are lots of information on A-Frame documentation, you can start with this guide for the fondamentals.
Good day. I am working with vuetify, using the following v-dialog in a component:
<template>
<div>
<!--Indicador-->
<v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<cube-shadow class="spinnerRotate"></cube-shadow>
</v-layout>
</v-container>
</v-content>
</v-dialog>
<!-------------->
</div>
</template>
<style scoped>
.vdialognew {
box-shadow: none !important;
max-width: 610px !important;
}
</style>
As you will see in v-dialog I have added the vdialognew class, to apply those new styles, but when loading the content by checking in the browser console, I see that the vdialognew class does not apply to it, only. Similarly, if I use the style property inside the v-dialog tag, it does not work for me. How can I make such a change?
I am doing this modification to eliminate the box that is seen behind the green square:
Thank you very much in advance. Blessings
Passing "class" to the v-dialog won't work.
Use "content-class" instead. In your case
<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>
should work.
Have a look at the v-dialog docs
Use "content-class" is the correct answer as mentioned by #mxmass, but if you're trying to add the class in scoped level, it won't work.
Add the style in the beginning, so let's say if you're using nuxt, create a main styling file such as main.scss, then in nuxt.config.js, add that file in css section. That way, your styling class is available when you're using "content-class". Hope this helps.
you can add multiple names to class
<v-dialog class="vdialognew dialogCss"></v-dialog>
<style>
.dialogCss {
background: #8e5ba6;
}
</style>
I'm learning three.js and I've done the cube successfully. Now I'm trying to make 3d text. I've copied the code from an example in the web which is the simplest one I've found (the example is here).
I've copied all the files from the example to my PC: the html, the css and the 4 referenced .js files including the font "janda_manatee_solid_regular.js". Then when I load the html the 3d text is not displayed (nothing is rendered in the canvas), but I don't get any error in the console.
I've uploaded here the html and everything else (css and js). What's the problem with this code?
In html code of your page (from the link you provided), there is:
<div id="canvas">
<canvas width="800" height="600"></canvas>
<canvas width="800" height="600"></canvas>
</div>
Probably, that in your source code you have it as
<div id="canvas">
<canvas width="800" height="600"></canvas>
</div>
and then in font-example.js you do this
container = document.getElementById( 'canvas' );
thus, you already have a canvas element in the canvas div and then you add one more canvas element of the same size.
var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 600;
...
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
As the result, you have two canvases and you can't see the second one (with nicely looking text) because it's below the bottom of your screen.
The solution is to keep the canvas div empty in your source html:
<div id="canvas"></div>