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.
Related
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 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
I'm using AR.js to create an AR scene. Everything works fine with Markers, but when I use Location-based AR, the object appears in one place and doesn't move when the device is rotated.
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.0.6/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0px; overflow: hidden;">
<a-scene gps-camera-debug embedded arjs="sourceType: webcam; debugUIEnabled: false;" vr-mode-ui="enabled: false">
<a-camera gps-camera rotation-reader>
<a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />
</a-camera>
</a-scene>
</body>
</html>
After I accept access to the camera and to location services, a yellow square appears over the camera display. However, moving the camera up, down, left, or right, doesn't move or rotate the object. The yellow square appears to be stuck on screen in one position.
The GPS location I'm using is exactly the same as the one reported by the gps-camera-debug. If I put in a different Lat & Long, then the yellow square doesn't appear at all.
Same results in Firefox v70 and an iPhone 6 with IOS 12.3.1. The messages in Firefox console are...
A-Frame Version: 0.9.2 (Date 2019-05-06, Commit #f57a1fa) index.js:92:8
three Version (https://github.com/supermedium/three.js): ^0.102.2 index.js:93:8
WebVR Polyfill Version: ^0.10.10 index.js:95:8
Successfully compiled asm.js code (total compilation time 81ms) aframe-ar.js
THREE.WebGLRenderer 103dev three.js:22620:10
gps-camera-entity-added aframe-ar.js:9031:17
Use of the orientation sensor is deprecated. aframe-ar.js:8785:15
AR.js 2.0.6 - trackingBackend: artoolkit aframe-ar.js:7121:10
The Components object is deprecated. It will soon be removed. 02
gps-camera-ready aframe-ar.js:8749:25
Allocated videoFrameSize 1228800 aframe-ar.js:2:23009
Pattern detection mode set to 1. aframe-ar.js:2:23009
Pattern ratio size set to 0.500000.
Any ideas what I'm missing?
The box shouldn't be a child item of the camera
<a-camera gps-camera rotation-reader>
</a-camera>
<a-box color="yellow" gps-entity-place="latitude: <lat>; longitude: <long>" scale="2 2 2" />
There could be a race while the gps is trying to position the box, and at the same time it's applying the camera transform. A wild guess, but still - tried it, and it works with the above code on android chrome.
I am building an A-Frame application and when in VR mode I can use the keyboard WASD to navigate and look up or down with movement to change camera height. The camera is facing forward except when I rotate my head in Oculus rift which works fine. In some Oculus apps such as home when you teleport you can rotate the thumbstick so that the direction you face changes after you teleport. Is there a way to change camera rotation with the keyboard in A-frame? I am using A-frame extras and my camera rig code is below. Thanks!
<a-entity id="rig" movement-controls="fly: true; speed: 0.1" wasd-controls position="11 1.5 2" >
<a-entity camera look-controls></a-entity>
</a-entity>
Add a rotation component to the id='rig' entity. Then you can make a new custom component ('overrotate'), and also add that to the id='rig' entity. Program overrotate to listen for keyboard input (whatever keys you like), and within that listener function, call the rotation component with a setAttribute(). Because you are now rotating the parent of the camera (the rig), you will still get your look-controls rotation of the camera, and also the override rotation for the rig, driven by keyboard input.
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.