I have a simple Threejs code where I am testing the click event with Raycaster. I used the BOX geometry to create three cubes. Using CSS2DRenderer.js, I have added a label above one of the cubes. I want to click on the label to bring up a popup with some information. I see that the cubes are detected when I click, but the label is not. Is the raycaster limited to meshes? If that's the case, how do I detect my label on click? You can find the click event code below:
window.addEventListener('click', event => {
raycaster.setFromCamera(clickMouse, camera);
const found = raycaster.intersectObjects(scene.children);
console.log(found);
});
You can only use Raycaster for detecting 3D objects like meshes, point clouds or lines. For labels rendered via CSS2DRenderer, you can just add a pointerdown event listener to the respective label DOM element.
Related
I have two scenes, scene1 and scene2. For dragging I have tried with three js draggable but it did not allow me to drag objects outside of scene1. I need to drag objects from scene1 and drop it to scene2.I have attached an image of it. Thanks in Advance.
[The image with two scenes]
"Draggable" in three.js simple means you can transform an object within the space where it exists. To move it between scenes, you would need to view it more as a transaction.
Mousedown on the item you want to drag
Save a reference to the object (var tempobj = selectedObj;)
Start dragging
Detect when your cursor exits the first viewport
Remove the object from scene 1 (scene1.remove(tempobj);)
Detect when your cursor enters the second viewport
Add the object to scene 2 (scene2.add(tempobj);)
Continue dragging the object until you mouse-up
I have a google map with drawing overlays for rectangle, circle, polygon. Everything is cool but I want to clear the overlays before I start drawing a new one (automatically).
There doesn't seem to be any way to clear it via an existing Google Maps control and I don't want to create some custom button for it.
google.maps.event.addListener(this.map, 'mousedown', function(event) {
console.log('map mousedown');
console.log(_this.drawingManager.getDrawingMode());
});
I'm trying to clear the maps when a mousedown event occurs on the map. But it seems when the map is in "drawing mode" this event doesn't fire. I also can't find any documentation on any kind of mouse events for the drawing control.
Is there a way to fire a mousedown even when in drawing mode (drawing a circle, rectangle, polygon, etc) ?
There isn't a way to fire a mousedown event on map when in drawing mode I know of, but still I think there are two possible ways for you to go:
A. Only if you are using custom buttons for drawing manager (meaning you set drawingControl: false when initializing DrawingManager and create your own buttons). Then, when any drawing button was pressed, e.g. button for drawing a polyline, you can listen for the event which is fired when drawing was complete, and setDrawingMode to null which ensures that user will have to click one of the icons again to start drawing, where you can in the same click listener delete all existing drawings. For example (illustrational, depends on your setup):
$('#polylineButton').on('click', function(){
//delete any previous existing drawings on map
drawing_manager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListenerOnce(drawing_manager, 'overlaycomplete',function(polyline) {
drawing_manager.setDrawingMode(null); //set to hand cursor after overlay was drawn
..
}
...
});
So this solution wouldn't require any additional buttons on the map, only those required to select respective drawing tools (hand, polyline, circle, etc.)
B. You cannot listen for the map click event, but you can still listen for a click event on the div containing the map. In that case you can, also with leveraging overlaycomplete event, set up some variables indicating when drawing started. Something similar to what was done in this answer .
So this is my code:
function OnMouseEnter()
{
GetComponent(Renderer).material.color = Color.grey;
}
function OnMouseExit()
{
GetComponent(Renderer).material.color = Color.white;
}
When I assign this to a regular game object like a cube it works fine, changing to grey when I hover over it with my mouse and changing to white when I take it away. But when I try this with 3d text nothing happens no matter what I do. What am I doing wrong, and how do I fix this?
OnMouseEnter and OnMouseExit requires Collider attached to the object in order to work (since it uses raycasting). Game objects such as cube come with collider attached by default, 3D text doesn't. Simply attach some Collider to your text (from Inspector window: Add Component => Box Collider), then it should work.
I have a sphere that contain a background picture. I have put the camera inside the sphere to do like a panorama when the sphere rotate.
Now I went to detect when user click on the sphere I have do like three js example :
var intersects = ray.intersectObject(sphere);
if(intersects.length > 0){
console.log("intersect");
}
Unfortunately this work only if we click on the outer part of the sphere (when the camera is not inside). When I click inside the sphere it's not detected.
Do you have an idea that how I can do this ?
Thanks.
Thank to stephomi (https://github.com/stephomi) I have found the solution.
Must set the side proprery of my sphere's material with THREE.DoubleSide.
And now the click is detected inside the sphere.
For example:
one tap is moving a shape.
Another tap is moving another shape at same time.
I have shared a small experiment I did on Kinetic + Multi Touch here. Have a look - perhaps it can help until "real" multitouch becomes available in Kinetic
You can set up a Kinetic Group like this:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/
Here's how to declare an empty group and make it draggable:
var group = new Kinetic.Group({
x: 220,
y: 40,
draggable:true
});
So in the tap handler of a shape, you can add the tapped object to the group.
circle.on('tap', function() {
group.add(circle);
});
Then you can drag the assembled group as necessary.
And if you need multiple groups, you can move individual shapes between the different groups like this:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/
circle.moveTo(someOtherGroup);
In the case of dragging two shapes at the same time, you will have to grab the touch event from the browser and read it as
touches[0] and touches[1] events
This is how you differentiate between separate touch events occurring simultaneously
official kineticjs example:
http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/