How to use look-at feature in Ar.js programatically - javascript

I am trying to use the look-at feature of Ar.js dynamically through js. But for some reason, the 3d-object is not looking out of the screen.

Answering the topic
You can set the look-at component using javascript, by adding it to any a-frame entity:
// using an existing entity as a target
entity.setAttribute("look-at", "#selector");
// using a Vector3 position as target
entity.setAttribute("look-at", {x: 0, y: 0, z: 0})
Answering this specific case
The look-at component (and the used by it lookAt method) assume, that the model is orented towards the z-axis.
The duck model is oriented towards the x axis.
If it's possible, reorient the model in a 3D modelling software like blender.
If not, then you can use a parent node to reorient it:
<!-- Parent node will look at the user--/>
<a-entity look-at="[camera]">
<!-- Child node with the rotation offset--/>
<a-entity rotation="0 -90 0" gltf-model ....>
Check it out in this glitch
If there are more models, you can create a rotation offset array, and apply it to the [gltf-model] node each time you load a new model.
The <a-camera> already contains a camera. To change its properties just use the <a-camera> attributes:
<a-camera fov="60" ....></a-camera>

You have to call the lookAt method on the object3D of your entity. Something like this :
var camera = document.querySelector("[camera]");
var position = camera.object3D.position;
entityEl.object3D.lookAt(new THREE.Vector3(position.x, position.y, position.z));

Related

How to add lights to make a scaned model looks real using AR.js

I am new to AR.js and want to make a very simple demo with AR.j. I get a 3d scanning model from sketchfabļ¼Œand put it into AR.js.
I tried light="type: point" intensity: 5.1, but the light doesn't looks like the model on sketchfab. When I tried with light="type: ambient", the whole model is black.
<a-entity id="point_light_1" light="type: point; intensity: 5.1;" position="0 0 0"></a-entity>
Here is the example from sketchfab and what I get. How could I get the same render effect like sketchfab shows?
A-frame Document would help you.
https://aframe.io/docs/0.9.0/components/light.html#sidebar
The effect of point light change according to the distance from materials. The closer the light bulb gets to an object, the greater the object is lit.Try to set the position of light nearer.
when i tried with light="type: ambient" whole model is black.
Maybe the model is in the shadowed area.

Programmatically change webvr camera view

I want to programmatically move the position of the view in a webvr scene. To do this I am using the position.add method.
Here is how I move the camera programmatically:
<a-entity position="33 0 -33" rotation="0 180 0" look-controls id="camera"
camera="userHeight: 1.6" listener></a-entity>
Camerage is moved here:
var obj3d = document.querySelector("#camera").object3D;
var angleobj = obj3d.getWorldDirection();
angleobj.y = 0;
obj3d.position.add(angleobj.multiplyScalar(0.004*3));
This works in normal mode, but in cardboard mode, the camera is not moving. How can I move the camera in cardboard view mode programmatically?
As far as i know, once you switch to the "VR mode", you get to use other camera than the one outside of "VR mode".
I think You should listen for the VR enter / exit events, and change the camera reference:
this.el.sceneEl.addEventListener('enter-vr',() => {
obj3d = document.querySelector("#camera").object3D;
}
this.el.sceneEl.addEventListener('exit-vr',() => {
obj3d = document.querySelector("#camera").object3D;
}
Please rethink, if this is necessary, when the user moves his head, and the camera goes wild, it can get really dizzy, really fast.
A-frame's Diego Marcos in his anwsers often recommends visual indications WHERE to look, instead of such options.
If the above does not work, try grabbing the camera entity, instead if its object3D:
var obj3d = document.querySelector("#camera");
and move it using the setAttribute() method
obj3d.setAttribute("position", {x: _x, y: _y, z: _z});

AFrame - exclude Entity from camera Fuse

does someone of you know a possibility to exclude Entities from the Camera Fuse???
I would like to use the Fuse cursor to trigger click events, but still i don't want the cursor to fuse on every single entity.
I'm sure there is a possibility to do what I want... but I cant find my way there. o0
just for people to know... if you use raycaster and curser in a entity you need to set the raycaster before the curser:
<a-entity raycaster="objects: .clickable" cursor> WORKS!
<a-entity cursor raycaster="objects: .clickable"> DONT!
https://aframe.io/docs/0.4.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:
https://aframe.io/docs/0.4.0/components/raycaster.html#whitelisting-entities-to-test-for-intersection
To select or pick the entities we want to test for intersection, we can use the objects property. If this property is not defined, then the raycaster will test every object in the scene for intersection. objects takes a query selector value:
<a-cursor raycaster="objects: .clickable"></a-cursor>
<a-box class="clickable"></a-box>

How has using THREE.Object3D changed from r52 to r72?

I have been editing models and grouping them together using Object3D in r52 which works fine. When I change to using r72 the model loads but in a distorted way and without some elements. I think it might have something to do with the "Object3D's position, rotation, quaternion and scale properties are now immutable." from the change log r67-r68.
~mrdoob/three.js/wiki/Migration
With r52
http://timepcode.web44.net/invaders-master/ships/saterlite.html
with r72
http://timepcode.web44.net/invaders-master/ships/saterlite72.html

OrbitControls : updating position and World/View scale of a 'helper'

I'm trying to manage a 3Dobject that visualize the controls target in order to make rotation and zoom more immediatly understandable ...
I've made a sample here with an AxisHelper which is supposed to indicate the target and to keep the same size. In OrbitControls.js there are comments on each line I've added.
As you can see if you pan and zoom (right click and scroll) it manages cursors too, but the 'helper' has two problems :
the position and scale of the helper is set after the renders, that why it seems to be somewhat elastic ... And if I place the position/scale updates into the scope.update() function that's the same thing.
the function bellow scales the helper to a constant size, it computes a World/View scale at a defined point (the control's target) from a unit vector. But it seems it's not the good solution because when you scroll to the max zoom the helper is growing.
var point = new THREE.Vector3( 1, 0, 0 );
point = point.applyMatrix4( scope.object.matrixWorld );
var scale = point.distanceTo( scope.target );
helper.scale.set(scale, scale, scale);
So if you have an idea to achieve this you are welcome ...
i'm currently developing something similar with threejs and i think that:
I can't see the demo, my proxy not allow it.
I think that is correct...if the object helper is a mesh or a sprite added to the scene when orbit controls zoom the camera became more near to the objects in the scene, the objects dimension remain the same.

Categories