I load some obj. and .mtl files and I create and add some object in the scene. I put them in an array, so I can detect when they 're clicked succesfully. ( (intersectObjects(objs,true) )
Although, when I create simple circle meshes and put them in an array so I can detect them, detection does not fully work. Very difficultly intersectObjects() detects my clicks on the circles (needs 4-5 clicks on average).
The strange thing is that when I press F12 and I open the Developer Tools (and then I close it or not,does not matter), everything works perfectly and the circles are easily detected. Very strange. I think something is wrong with intersectObjects(). It seems to me that it does not handle well the meshes.
Piece of code (because project is big and complicated):
https://dl.dropboxusercontent.com/u/100222836/code.js
Note: I think couple of days ago console put out an "error" message relate to the .getDescendants function of the Three.js file in the IntersectObjects function.
EDIT
An other odd thing that happens is that before I open the developer tools, I click next to a circle ( the empty space at the left of a circle) and it detects the click as if I had clicked the circle itself (the circle in the right of the empty space changes color as expected by the click)! (see pic where I click : https://www.dropbox.com/s/0gqb6iovon8c665/Screenshot%202014-05-15%2015.51.18.png ).
After I opened the Tools, it does not detect the clicking in the empty space at the left of a circle. Instead, I click on a circle and it detects the click as if I had done it in the right circle* (the circle in the right of the one I clicked, changes color as expected by the click) : https://www.dropbox.com/s/ntiumegrg7wkgie/Screenshot%202014-05-15%2015.51.18%20-%20Copy.png
So Something is wrong with the meshes that are loaded on the scene, or with how the intersect() works.**
*I fixed that,it was just a math problem. So now when I open the D.T. it works fine. Still remains the problem if I don't open the D.T.
**
EDIT 2 this is the code of the project. check it : https://dl.dropboxusercontent.com/u/100222836/test.html
**
Related
I am trying to clone a website and here is this website's link
https://shopee.vn/
as you can see in this picture, when I hover the mouse to the line name "tải ứng dụng"
it will show the QR code
picture about problem 1
my problem is, I want to use some extensions like page ruler redux to measure the QR code's size, but it disappear when I move the mouse to another position (I click to the hover at the force element state, but it still disappear).
I think that when I click to the hover at the force element state, it must show the QR code and it will not disappear ?
Could you please give me some way to make it display to measure it?
Thank you very much for your time.
The Chrome/Edge Dev tools have a built-in measurement function, hopefully this gets what you want.
Right-click => Inspect element on the link, expand the div and click on the :after selector
Making sure the inspect element page is in focus (the last thing you clicked on), hover over the link
With only the arrow keys on your keyboard, navigate the element tree (up/down to move up and down, left/right to expand, enter if you want to copy a property, like the image url). As long as you don't click, the element stays up.
find the QR code element node by chrome devtools, as you can see in this picture, the div html which one has a classname be named shopee-drawer__contents
picture about how to find element node name
In chrome devtools console, you can print it out or use document method to measure it.
For instanse document.getElementByClass('shopee-drawer__contents').getBoundingClientRect()
print out width & height
There are no hints in the box when you hover the red x:
Sometimes there are a couple, sometimes there will be 20+ depending on the snippet.
How do you remove these? I've browsed the settings and used google but can't find a solution.
Could it be a extension that I have downloaded?
When you hover over the red 'X' its just a tiny blank(white) tooltip containing nothing.
The little red X is found on lines that are referenced in console error messages. It would be veeery useful if clicking or hovering on the X took you back to the console with a filter set to select the relevant messages. Or failing that, if it did anything.
I'm using A-Frame on my project. There's this cursor component that enables you to interact with the elements by clicking, which is quite similar to DOM clicking.
However, the cursor clicking no longer works after I implemented my Pointer Lock.
Pointer Lock works well for me, I can walk around and look around in my scene, and the cursor always appears in front of me.
Why is the clicking not working? I can confirm that the clicking works fine when I haven't entered the Pointer Lock mode. Thanks!
Link to my demo:
http://zichao.co/exp/_simu/
I have added a listener on the '#floor'. If you successfully clicked the floor, the console should say 'hello'.
When you try to implement your PointerLock using the apis, first you need to define an element, and call element.requestPointerLock, is that right? The issue here is that element.
I took the a-scene as the element. What you should do is to take the canvas as the element - the canvas that is rendered later by a-frame, or three.js.
A $(document).ready() function is not able to return you the canvas because it is inserted into the dom by three.js, i.e. the dom is ready before canvas is created. What I do now is to set an interval to loop and check if canvas is created, and then activate the PointerLock.
Solved.
I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."
So I'm working on my first bookmarklet and had a few questions.
The goal of the bookmarklet is to overlay a video player on any website to essentially dim the lights everywhere except the actual player.
The user flow would go something like this:
user clicks the bookmarklet and they are able to hover over certain elements of the page where they highlight (think Firebug inspect)
user hovers over the correct div (where the video is) and clicks it
that area that they click remains "see-through" while the rest of the visible browser page goes black (or say 90% opaque.)
clicking the bookmarklet again would clear the selection and allow the user to start over.
Another idea would be to allow the user to "drag / draw" a rectangle where the video would be and then step 3 would occur after making a selection on the page.
I'm just looking for any ideas / snippets / anything else that might be out there to get me going in the right direction.
Try putting an opaque/near-opaque black div over the entire screen, then setting the z-index of the video to something higher than the black div.
You can use something like what's at this page to determine what element the mouse is over and highlight it.