Three.js and twitter bootstrap object detection error

Question

I came across a really weird problem and can't get my head around it for quite a few days now.

I am working with three.js on a project and at some point it involves object detection when the user is clicking with the mouse. So far so good, the few tests I run were working fine, however when I implemented my code in the app (which uses twitter bootstrap), the object detection was always a few pixels off every time.

It took me hours of search until I realize that this problem occurs from the various sidebars around my application! Here is the html for a basic example that recreates the problem:

<div class="container">
    <div class="row">
        <div class="span2">
            <!--Sidebar content-->
            Sidebar Content
        </div>
        <div class="span10">
            <!--Canvas Container-->
            <div id="container"></div>
        </div>
    </div>
</div>

You can view the javascript for it in this following fiddle:

http://jsfiddle.net/heAwa/

It contains a standard three.js example that is wrapped around a container from twitter bootstrap. If you hover around a few objects you will notice that on a few of them (especially those in the background) the mouse detection is well off!

I have no idea why the canvas element is being affected by those sidebars! Any thoughts?

This is a duplicate of http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div — WestLangley, Jun 29 '13 at 10:09
It is indeed! A million thanks WestLangley for your work on the framework and for your answer! — Dennis Tsoumas, Jun 29 '13 at 10:14

Three.js and twitter bootstrap object detection error

0 Answers0