Occulusion culling occurs when positioning the .gltf model and moving the camera.
I want to control this, but even though the camera's near value is set to the minimum value of 0.001,
the object keeps culling in view. How shall I do it?
When I'm a little far from the object
When I got closer to the object
This component should fix the problem. Then add it to your entity.
AFRAME.registerComponent('no-cull', {
init() {
this.el.addEventListener('model-loaded', () => {
this.el.object3D.traverse(obj => obj.frustumCulled = false)
})
},
})
Related
I'm trying to show the context menu in a position where a user touched a screen with long-press. I found the TapHandler signal longPress that looks like its going to solve my problem, but it doesn't have any input parameters like eventPoint:
TapHandler {
onLongPressed: {
if (Qt.platform.os == "android" || Qt.platform.os == "ios") {
// contextMenu.x = eventPoint.position.x
// contextMenu.y = eventPoint.position.y
contextMenu.open()
}
}
}
Any suggestions or ideas?
From the docs, regarding point: HandlerPoint: "The event point currently being handled. When no point is currently being handled, this object is reset to default values (all coordinates are 0)."
https://doc.qt.io/qt-5/qml-qtquick-taphandler.html#point-prop
Trying to make a click to move game in Babylon.js, so I'm trying to get the position on the plane that is being clicked on.
myGround.actionManager = new BABYLON.ActionManager(scene)
myGround.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
console.log(evt)
}));
This code does not seem to tell me the point on the parent mesh that was clicked. Is it possible to get this data?
Of course, you can use the picking collision to find the screen and world coordinates of the point you clicked on.
The simplest code can be found here:
https://www.babylonjs-playground.com/#NU4F6Y
You can also use the event from scene.onPointerObservable :
cene.onPointerObservable.add((evt) => {
if(evt.type === BABYLON.PointerEventTypes.POINTERPICK) {
console.log(evt.pickInfo.pickedPoint)
}
})
More info about picking info can be found here:
https://doc.babylonjs.com/babylon101/picking_collisions
I'm using ArcRotateCamera, when I click on mesh, I have to focus camera on
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 300, BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
// on mesh click, focus in
var i = 2;
var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit) {
pickInfo.pickedMesh.actionManager = new BABYLON.ActionManager(scene);
pickInfo.pickedMesh.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function (event) {
camera.position = (new BABYLON.Vector3(pickInfo.pickedPoint.x, pickInfo.pickedPoint.y, camera.position.z + i));
i += 2;
})
);
}
this code changes mesh's z position but don't makes it in the center of screen
There are a few things that can be changed in your code.
1st - what you are doing is executing a code action after a click, instead of simply running the code in the callback after a pick has occurred. You are registering a pick action (technically user click) on right on the first frame, but only if the mouse was found in the right location at the right moment. My guess is that it didn't work every time (unless you scene is covered with meshes :-) )
2nd - you are changing the camera's position, instead of change the position to which it is looking. Changing the camera's position won't result in what you want (to see the selected mesh), it will move the camera to a new position while still focusing on the old position.
There are a few ways to solve this. The first is this:
scene.onPointerDown = function(evt, pickInfo) {
if(pickInfo.hit) {
camera.focusOn([pickInfo.pickedMesh], true);
}
}
The ArcRotate camera provides focusOn function that focuses on a group of meshes, while fixing the orientation of the camera. this is very helpful. You can see a demo here:
https://playground.babylonjs.com/#A1210C#51
Another solution would be to use the setTarget function:
https://playground.babylonjs.com/#A1210C#52
Which works a bit differently (notice the orientation change of the camera).
Another thing - use the pointer events integrated in Babylon, as they are saving you the extra call for a scene pick. pointer down is executed with the pickinfo integrated in the function, so you can get the picking info of the current pointer down / up / move each frame.
**** EDIT ****
After a new comment - since you want to animate the values, all you need to do is store the current values, calculate the new ones, and animate the values using the internal animation system (documentation here - https://doc.babylonjs.com/babylon101/animations#basic-animation) . There are many ways to achieve this, I took an old function and modernized it :-)
Here is the demo - https://playground.babylonjs.com/#A1210C#53
enter image description hereWhat if we could simulate 6dof control on the Oculus Go controller? Imagine that we turn the controller 3d model into a hand, it still just rotates, but imagine that we use the touchpad to move the hand foward, left, right, or backwards in space, the touch pad gives you movement along a z and x axis in space, but the accelerometer/gyro gives you a y and x axis. so the accelerometer/gyro serves as the arm, and the touch pad serves as the hand/wrist, a hand that can move forward and back and only twist left and right, and grip with the trigger, the hand can't tilt up or down but the arm can make up for that. So how do I build this?
There is https://www.npmjs.com/package/aframe-thumb-controls-component that provides events for pressing thumbpad in directions (e.g., thumbupstart, thumbleftend).
Write a component that listens to those events, sets a property (e.g., this.buttons.left = true, then the tick handler needs to update the this.el.object3D.position based on which buttons are held down.
Also need to take into consideration the direction the camera is facing. https://github.com/aframevr/aframe/blob/master/src/components/wasd-controls.js is a good starting point is it is similar, where it listens to key downs and translates position. Just need to modify to use thumb-controls instead.
More hints:
<script src="https://unpkg.com/aframe-thumb-controls-component#1.1.0/dist/aframe-thumb-controls-component.min.js">
AFRAME.registerComponent('thumb-movement-controls', {
init: function () {
this.buttons = {
left: false, right: false, up: false, down: false
};
this.el.addEventListener('thumbleftstart', () => {
this.buttons.left = true;
});
this.el.addEventListener('thumbleftend', () => {
this.buttons.left = false;
});
},
tick: function () {
// Really simplified movement. Does not take into account camera heading or velocity / time, but wasd-controls shows how.
if (this.buttons.left) {
this.el.position.x -= 0.001;
}
}
});
<a-entity daydream-controls thumb-controls thumb-movement-controls></a-entity>
I am playing with Aframe (version 0.8.0) sometime now. I am stuck at one problem, I have been searching for its solution for couple of days but failed thus this question.
My problem is how can I change camera rotation without having to drag on canvas?
I tried these things but they didn't work:
camera.setAttribute('rotation', {....})
camera.object3D.children[0].rotation.x = 0 // some value
putting camera entity as the child of another entity and changing the rotation of parent entity is not what I am looking for
Any hint would be appreciated, thanks...
Update: this problem occurs only with version 0.8. There is no such error in previous version 0.7.1.
You're milage will vary but you could try:
https://glitch.com/edit/#!/a-frame-rotate-camera-test
AFRAME.registerComponent("rotate", {
init: function () {
document.body.onkeyup = (e) => {
if(e.keyCode == 32){
this.el.components['look-controls'].yawObject.rotation.y += 1
}
}
}
});