UI elements non-responsive when animating using three.js
I am using webgl, with three.js, to show some data, but I want the user to
be able to also use the select object, but when I click on the component
the options aren't displayed, once the animation starts.
So, it appears that webgl is tying up the main event thread, or mouse
clicks outside of the canvas is not recognized.
This is what my HTML looks like:
<div id="maindiv">
<div id="menubardiv"><select><option
value="discover">Discover</option><option value="sel1">Select
1</option><option value="sel2">Select 2</option></select></div>
<div id="contentdiv">
<div id="cpudesc"></div>
<canvas width="1064" height="619"></canvas></div>
</div>
So how do I allow the user to click on elements outside of the canvas that
will then make changes to the visualization?
UPDATE:
Here is a snippet of my javascript, as, even when I don't call animate the
problem already appears:
var canvasdiv = function(topelem) {
var zDown = false;
if (topelem != null)
init();
else
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth
/ window.innerHeight, 1, 10000);
camera.position.z = 1000;
camera.lookAt(new THREE.Vector3(0, 190, -50));
var loader = new THREE.JSONLoader();
var json = JSON.parse(document.getElementById('stuff').innerHTML);
var result = loader.parse(json, null);
cpuResult = result;
scene = new THREE.Scene();
for ( var y = 0; y < 5; y++) {
colors[y] = 0x00ff00 * Math.random();
}
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
topelem.appendChild(renderer.domElement);
projector = new THREE.Projector();
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(animate);
camera.position.x = 0;
rotation += 0.001;
camera.position.x = Math.sin(rotation) * 1000;
camera.position.y = Math.cos(rotation) * 1000;
camera.position.z = zDown ? camera.position.z -= 0.01
: camera.position.z += 0.01;
if (zDown && camera.position.z < -10)
zDown = false;
else if (!zDown && camera.position.z > 10)
zDown = true;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
}
Using the profiler in Chrome, I have two events: Animation Frames and
Composite Layer
Each AnimationFrame duration is about 80ms and the Composite Layer about 0ms.
When I profile I have 2.93% idle, function (program) is at 51% of the CPU.
No comments:
Post a Comment