I've looked all over for examples online but to no avail.
Trying to play a howler sound through an entity in my A-frame scene so it can be heard relative to the camera. Tried several approaches and none seem to work.
Howler is defined like so:
var voice = new Howl({
src: ['./mp3/voice.mp3'],
autoplay: false,
preload: true,
loop: true,
volume: 1
});
...and I have a component set up on an entity. Tried reaching into A-frame's sound capabilities and bodged some pos() stuff with howler, struck a dead end. How is this done? Any and all feedback appreciated.
Related
What I want is that on a-frame, when I talk, my 3D model avatar is also being made talking.
Following this guide, https://aframe.io/docs/1.1.0/introduction/models.html#animating-models, I created 3D model avatar with this resource, https://sketchfab.com/3d-models/bake-talking3-e715ab67be934a108d0a952d90c07210
But this gltf 3D model is talking all the time. I need interactive 3D model talking whenever I talk.
Let's assume my voice detection is already implemented.
Can anyone answer this, please?
The animation-mixer component has two methods that should help
playAction() which will play the
stopAction() which will stop the
Let's assume my voice detection is already implemented.
Then Your code could look like this:
const modelEntity = document.querySelector("[gltf-model]")
const animationComponent = modelEntity.components["animation-mixer"]
mySpeechRecognition.onspeechstart = function() {
animationComponent.playAction();
}
mySpeechRecognition.onspeechend= function() {
animationComponent.stopAction();
}
Something like what I did in this glitch. Green plays, red stops. Click on the fish to check out the source.
I am implement a screenshot app with javafx, like lightshot. I am done with almost all the functionalities, but I am now stuck at the undo operation. I am adding the free draw, line arrows, rectangles etc on a rectangle like this :
selection.setCursor(Cursor.CROSSHAIR);
Arrow arrow = new Arrow();
selection.setOnMousePressed((evt) -> {
rootPane.getChildren().remove(arrow);
arrow.setStartX(evt.getX());
arrow.setStartY(evt.getY());
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
arrow.setStyle("-fx-background-color:red");
rootPane.getChildren().add(arrow);
});
selection.setOnMouseDragged((evt) -> {
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
});
selection.setOnMouseReleased((evt) -> {
arrow.setEndX(evt.getX());
arrow.setEndY(evt.getY());
});
drawtype = "arrow";
});
Selection is the rectangle that I have drawn, this is an example of how I am adding the arrow. I have tried researching online but I cant seem to get something to point me in the right direction, anyone who can help out here please? Remember, I am not using Canvas or GraphicsContext.
If you want to be able to undo the actions, you need to store the state of your 'drawing'.
In your case undoing the creation of your Arrow element, would be simple rootPane.getChildren().remove(arrow);
You just need to create a Data Structure where you store all actions done by the user (or at least a few). And each action can get reversed.
Example:
ActionType.Add -> action: getChildren().add(xyz) -> reverse: getChildren().remove(xyz)
ActionType.Move -> arrow.setEndX(evt.getX()) -> arrow.setEndX(oldX)
Each action should contain all information needed to reverse it. (The node involved, what was done and how it was before)
I can find no explanation on what these are actually supposed to do.
There are examples on:
https://jxbrowser.support.teamdev.com/support/solutions/articles/9000102480-forwarding-mouse-events
but 629 and 373 ? I can't figure out what those values are for. I can get the same behaviour with any value for those.
What if you one also sets windowX and windowY ?
What would they do to the result click?
I am looking to be able to click and move on a google map. Is that possible?
The x and y values define the mouse event coordinate inside the browser content area.
The globalX and globalY values define the screen coordinate of the mouse event.
The windowX and windowY are deprecated. If you set them, this doesn't affect anything.
For more detailed information about working with Google Maps, please take a look at the article.
Your browserView must be active/focused first!
Then, let's do this way:
public static void simulateMouseClickOnElement(Browser browser, BrowserView browserView, DOMElement element){
Rectangle rect = element.getBoundingClientRect();
Point ptOnScreen = new Point(rect.x , rect.y );
SwingUtilities.convertPointToScreen(ptOnScreen, browserView);
forwardMouseClickEvent(browser,MouseButtonType.PRIMARY,rect.x,rect.y, ptOnScreen.x, ptOnScreen.y);
}
JxBrowser is the BEST automation or crawling/hacking tool! Selenium is a best alternative choice due to the TCO.
Just started playing with A-Frame and I can see vive-controls and oculus-touch-controls but nothing for google daydream.
I've looked at the component repo and don't see anything that looks like it'll do the job. The closest thing to now investigate would be the Gamepad API, but I'm amazed I can't find anything.
I've got a Pixel XL & daydream and would like to incorporate the controller rather than just head tracking and gaze based control. Can someone point me in the right direction please.
Thanks
UPDATE - I've got the Daydream controller working for clicks! Running the 360-image-gallery(https://aframe.io/examples/showcase/360-image-gallery/) accepts clicks from the Daydream controller. I guess maybe it had timed out on my previous attempts or I hadn't paired it properly! I'll keep playing!
Working on setting up a Daydream remote in an Aframe project. There are no components for the daydream remote yet, but I'm hoping to complete one soon – and it sounds like they are gonna mainline support in an upcoming Aframe release.
But you can hand roll support no problem.
First, there are a few things you'll need to do in preparation:
Download Chrome Beta 56 on your Pixel:https://www.google.com/chrome/browser/beta.html
.
Open Chrome Beta, navigate to chrome://flags and enable the WebVR and Gamepad flags.
Now, you will be able to launch experiences that are built with Aframe v0.4 or higher in true WebVR. You'll get prompted with the usual Daydream screens (place your phone in the headset, and connect the remote.) If you are connecting to a local development environment, you'll see a secure connection warning but this, while annoying, won't stop you from working.
Second, now that you are running true WebVR, you need to leverage the Gamepad API to get information from your daydream remote. Lets start by just logging that it is connected.
window.addEventListener('gamepadconnected', function(evt) {
console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
e.gamepad.index, e.gamepad.id,
e.gamepad.buttons.length, e.gamepad.axes.length);
});
Third, now that you are logging a connection, you will need to setup an update loop to get the current state of the Gamepad. You can do this with requestAnimationFrame. Follow the tutorial here: https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
Once I've published a basic dayframe-remote component, I'll post a link here. Hope this helps get you started!
EDIT: Looks like the suggestion below works great. Just pass "Daydream Controller" as the id for tracked controls: tracked-controls="id: Daydream Controller".
Here is a sample Daydream controller output. At the moment, only the trackpad button appears to be exposed – not the app or home buttons.
{
axes: [0, 1],
buttons: [{
pressed: false,
touched: false,
value: 0
}],
connected: true,
displayId: 16,
hand: "left",
id: "Daydream Controller",
index: 0,
mapping: "",
pose: {
angularAcceleration: null,
angularVelocity: [0, 0, 0],
hasOrientation: true,
hasPosition: false,
linearAcceleration: [0,0,0],
orientation: [0,0,0,1],
position: null
},
timestamp: 1234567890123
}
Something for you to try...
the way the current A-Frame 0.4.0 support in tracked-controls should work:
if you specify that it should only match an ID value of empty string '' then it should match any gamepad with a pose... so you can try something like
<a-entity tracked-controls="id:"></a-entity>
and see if that gets events etc.?
A-Frame master branch now contains a daydream controller component: https://aframe.io/docs/master/components/daydream-controls.html
I'm using the google-maps-utility-library-v3 to incorporate a Google Earth API view to a Google Maps API v3 implementation. Those Google Maps API v3 / Earth API utilities have been written by user jlivni as far as I can tell, the availability of which code has helped me greatly thus far.
(very rough working prototype of my implementation is here)
The problem I have is that I want to default (on page load) to the Google Earth view, rather than (as in the prototype above) one of the Maps API v3 standard views.
I have looked at lines 81, 131 and 133 of the (uncompiled?) googleearth.js at the above link (under src) and tried the following when setting the Maps API options within my JourneyImmersionInitialiseMapLoadGPXAnimate.js ...
var myOptions = {
zoom: 18,
center: arr_lat_lon[currentTrk][currentTrkseg][0],
scaleControl: true,
tilt: 45,
mapTypeId: earthMapType,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
... but get ...
ReferenceError: earthMapType is not defined
Additionally I've tried ...
mapTypeId: GoogleEarth.earthMapType,
... which results in a grey map canvas with no map type options on the top right. Once I've selected the Earth view from the page I can then change between the standard Earth API map types at the console in Firebug using ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_EARTH)
... or ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_SKY)
... but again, use of earthMapType or GoogleEarth.earthMapType in place of the last element results in an error at the Firebug console, this time ...
Error: Error calling method on NPObject!
Any help would be greatly appreciated.
Thanks in advance
(as I'm a newbie I can't provide more than two links in this post but wanted to add that I have looked at stackoverflow.com/questions/3039250/google-earth-integrated-with-google-maps-api-v3)
This library doesn't have a public method to switch programmatically, and if you try to do it before all the setup is in place, it will fail. Ideally there would be a callback after instantiating your GoogleEarth object, but lacking that you can hack around the issue by using the private showEarth_() method on the uncompiled JS.
Noting you have to wait an arbitrary amount of time before the plugin is ready, something like this should generally do the trick:
googleEarth = new GoogleEarth(map);
setTimeout('googleEarth.showEarth_();',1000);
This is all pretty hackish, so please file a feature request on the issue tracker to add in a supported method for switching to the Earth type programmatically.