javascript - Not smooth object rotation in the browser -
i visualizing objects in browser. object should viewed rotating around 1 axis time (x or y or z) or user can rotate mouse. problems having:
1- when autorotate object around 1 axis, starts rotate in feasable way (even not smooth in opengl) , after minute, rotation starts descrete, i.e. angle seems increasing 180 degrees)
2- when rotate object mouse, not smooth @ all, (i don't know how aften mouse event being fired).
3- how can rotate object mouse around 2 axis? y , x.
4- how put view window small div? tried goes big , out boundaries,
here code:
<script> var t = 0; var container, interval, camera, scene, render, linesmaterial, ismousedown = false, onmousedownposition, radius = 200, angle_y = 0, angle_x = 0; init(); function init() { var t = 0; var scene = new three.scene(); camera = new three.perspectivecamera(75, window.innerwidth / window.innerheight, 0.1, 1000); var renderer = new three.webglrenderer(); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); {# renderer.setsize(document.getelementbyid('test').clientwidth, document.getelementbyid('test').clientheight);#} {# document.getelementbyid('test').appendchild(renderer.domelement);#} // object drawing onmousedownposition = new three.vector2(); document.addeventlistener('mousemove', ondocumentmousemove, false); document.addeventlistener('mousedown', ondocumentmousedown, false); document.addeventlistener('mouseup', ondocumentmouseup, false); document.addeventlistener('mousewheel', ondocumentmousewheel, false); render = function () { requestanimationframe(render); renderer.render(scene, camera); angle_y = angle_y + 0.1; camera.position.x = {{ neuron.center.x }} +radius * math.cos(angle_y); camera.position.y = {{ neuron.center.y }}; camera.position.z = {{ neuron.center.z }} +radius * math.sin(angle_y); camera.position.x = {{ neuron.center.x }}; camera.position.y = {{ neuron.center.y }} +radius * math.cos(angle_x); camera.position.z = {{ neuron.center.z }} +radius * math.sin(angle_x); camera.lookat(new three.vector3({{ neuron.center.x }}, {{ neuron.center.y }}, {{ neuron.center.z }})); }; render(); } function ondocumentmousedown(event) { event.preventdefault(); ismousedown = true; onmousedownposition.x = event.clientx; onmousedownposition.y = event.clienty; } function ondocumentmousemove(event) { event.preventdefault(); if (ismousedown) { var angle_step = 0.4; if (event.clientx < onmousedownposition.x) { angle_y += angle_step; } else if (event.clientx > onmousedownposition.x) { angle_y -= angle_step; } if (event.clienty < onmousedownposition.y) { angle_x += angle_step; } else if (event.clienty > onmousedownposition.y) { angle_x -= angle_step; } } render(); } function ondocumentmouseup(event) { event.preventdefault(); ismousedown = false; render(); } function ondocumentmousewheel(event) { var wheel_step = 5; if (event.wheeldeltay > 0) { radius -= wheel_step; } else { radius += wheel_step; } } </script> thank much
to make window smaller, can use element styling , and set height , width values want displayed as:
renderer.domelement.stylewidth = '100px'; renderer.domelement.styleheight = '100px'; for mouse control , rotation should @ examples on threejs.org (especially under 'canvas'):
Comments
Post a Comment