I want to make a child object to look at the camera position.
In my code, the a-text object is child object of a-entity that is a sphere.
I set the lookat for a-text object to camera position. but it works wrong behavior.
I found the reason but no idea for how to solve it.
According to three.js explains (https://threejs.org/docs/#api/en/core/Object3D.lookAt)
This method does not support objects having non-uniformly-scaled parent(s).
But I don't have any idea what is uniformly-scaled parent...
I think it means that if you look at the parents of the object they all have the same scale.
Just to be clear, the two entities below would not work right
<a-entity scale="1 2 1">
<a-entity scale="2 2 2">
</a-entity>
</a-entity>
https://aframe.io/docs/1.0.0/components/scale.html#sidebar
Related
I am creating a scene in A-frame (https://aframe.io) using the networked A-frame component (https://www.npmjs.com/package/networked-aframe) and I'm wondering how I can create a "networked object" where when two users are in one scene and one user moves the object, it will update for both players and the object will move even for the player that hasnt moved anything. I want to use vr hands inside A-frame to move objects around my scene however currently when I move and object, the object only moves for one player and for the other player it remains in the same spot. Link to a networked a-frame boilerplate glitch project:
https://glitch.com/edit/#!/networked-aframe?path=README.md%3A1%3A0
Code for a movable box I want in my scene that should update for both players:
<a-box hoverable grabbable stretchable draggable dropppable color="blue" position="0 0 -1"></a-box>
I am having trouble wrapping my head around how the user's video camera is involved in the AR.js/a-frame process. Specifically, this line below:
<a-entity id="camera" camera></a-entity>
is baffling me. What does it really do? When I comment it out, my webcam is still populating the scene, (Is this because of the "embedded arjs" declaration in the scene tag?) and also my 3d model does not display on top of the marker (again, when I comment that line out).
I'm just trying to get a better understanding of things.
Full code below:
<a-scene id="container" embedded arjs>
<a-marker preset='custom' type='pattern' url='assets/pattern-gimmelogo2.patt'>
<a-entity
position="0 -1 0"
scale="10 10 10"
gltf-model="assets/gpaglb.glb"
id="glb"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
></a-entity>
</a-marker>
<a-entity id="camera" camera></a-entity>
</a-scene>
Regarding the camera, what's going on is explained in the documentation here:
https://aframe.io/docs/1.2.0/components/camera.html#default-camera
"If a camera is not specified, A-Frame will inject a default camera:
<a-entity camera="active: true" look-controls wasd-controls position="0 1.6 0" data-aframe-default-camera></a-entity>
If a camera is specified (e.g., our own <a-camera> or <a-entity camera>), then the default camera will not be added."
I don't really understand the 2nd part of the question. Perhaps you could post a glitch showing the problem? The issue might be with the assets rather than the code you have posted.
I'm trying to create a plane that will receive a shadow but will be invisible to the camera in order to make a 3d model look like floating
tried to make material transparent
<!-- this is the shadow system -->
<a-entity light="type: ambient; intensity: 0.5;"></a-entity>
<a-entity light="type: directional;
castShadow: true;
intensity: 1;
shadowCameraVisible: true;"
position="0 0 5"></a-entity>
<a-assets>
<!-- the models -->
<a-asset-item id="animated-asset" src="https://artshirtsonline.com/shanatova/models/test_lines.gltf" ></a-asset-item>
</a-assets>
<a-marker id='animated-marker' type='pattern' preset='custom' url='https://artshirtsonline.com/shanatova/markers/pattern-qrcode2.patt'>
<a-entity animation-mixer="loop: repeat" gltf-model='#animated-asset'
scale="1 1 1"
shadow="cast: true"
rotation="-90 0 0"></a-entity>
<a-circle id="ground" radius="7" rotation="-90 0 0" position="0 -2 0" shadow="receive: true" ></a-circle>
</a-marker>
<a-entity camera ></a-entity>
</a-scene>
I expect to get a shadow only on a surface
Yes, this is definitely possible, but you need to do a bit of threejs programming to make it work.
Here is an example of shadow casting the normal way:
https://glitch.com/~shadow-cast-basic.
note that you must set the light to cast shadows, and you must place a shadow component
on the shadow caster and receiver. You adjust the quality of the shadow in the scene entity.
<a-scene shadow="type: pcfsoft">
The shadow is clearly visible, but plane is not transparent.
To achieve the desired effect( visible shadow with transparent object), you must use the THREEjs shadow material.
https://threejs.org/docs/#api/en/materials/ShadowMaterial
Aframe does not provide access to this directly, but you can make a custom component that creates the material for you. Here is an example of that.
https://glitch.com/~shadow-material
I ran into this issue a few months ago for an augmented reality project I was working on and ended up creating ready-to-use components that you can find on my Github, in case anyone comes across this post and doesn't feel like taking the time to figure it out for themselves.
I am very bad at three.js - but I believe I have cobbled together a basic raycast on a set of objects, to select the object of interest.
http://designs.playgami.com/webgl_loader_fbx.html
I am now trying to have OrbitControls.js focus the target vector on that object, i.e., once selected, be able to orbit around that object. I have tried a few variations, where some lead to what appears to be an empty (or out of camera range) scene.
controls.target.set(obj.position)
where obj is the raycast object and controls is the OrbitControl instance.
The quick(?) question: how do you set the orbit center of three.js OrbitControl given an object from a raycast?
It turns out that the fbx model on raycast seemed to return one of its child objects in the child object's coordinate system (though the material coloring seemed to color the whole object). Setting it to the parent seems to have solved it.
Check to see if it's a child object or child segment that is returning the same local coordinate
for controls.target setting, the vector3 is an object that needs to be copied .copy (thanks #WestLangley)
I am trying to rotate a box around its center while keeping the rest of the models fixated. Here is my code -
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls#1.0.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader#1.1.3/dist/aframe-supercraft-loader.js"></script>
</head>
<body>
<a-scene>
<a-entity id="super" supercraft-loader="name: better-reaction" ></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15">
<a-box position="0 1.6 -21" color="red"></a-box>
</a-entity>
</a-scene>
</body>
and here is the codepen: https://codepen.io/nirajupadhyay11/pen/RBBpbd
However, the entire model rotates on dragging the mouse, instead of just the box.
The result I am after is keeping the box and the model fixated at their respective positions but when the mouse is dragged, the box should rotate around it's center.
I am trying to get this to work so that, in my game that I am developing, I can have a 3d gun model point to different directions based on mouse drag. Their are other 3d models in the game such as trees and rocks but they should remain in their position when the mouse is dragged.
Here is one example of what I am trying to achieve - https://codepen.io/jordizle/pen/haIdo
Could you please help me with this?
Thanks,
Niraj
The orbit controls are basically a camera rotating around on an orbit. Hence the name.
If you want the scene "still" and only one object rotating, you can't rotate the whole camera. You need to rotate the object alone.
A simple way to achieve what you want would be checking where the mouse is dragged on the window
when the mouse is pressed, get the position
on mousemove check how much the position has changed. Rotate the object accordingly to the changes.
when its released, stop listening for the mousemove.