javascript - Visual glitch in a three.js animation -
i coding animation using three.js (r76) and, while works fine on computer, friend got visual glitch when running it. object leaves trace upon rotation, can seen in screenshot:
here mwe, able reproduce bug.
var camera, scene, group, renderer, container, stats; var width = 450; var height = 400; var mouse = new three.vector2(-1, -1); var clic = false; var mouseglob = new three.vector2(); var raycaster = new three.raycaster(); var pause = false; var inters = 0; function init() { scene = new three.scene() camera = new three.orthographiccamera(-width/2, width/2, -height/2, height/2, 1, 1000); camera.position.z = 300; scene.add(camera); atomradius = 50; var segments = 15, rings = 15, bondlength = 2*atomradius*1.5 bondradius = 10, atompos = bondlength/math.sqrt(3); var atom = new three.spheregeometry(atomradius, segments, rings); var material = new three.meshbasicmaterial({color:0x6f919a,wireframe:true, opacity:0.8}); var flash = new three.meshbasicmaterial({color:0xff0000,wireframe:true}); var atomc = new three.mesh(atom, material.clone()); atomcl1 = new three.mesh(atom, material.clone()); atomcl1.position.set(atompos,atompos,atompos); atomcl2 = new three.mesh(atom, material.clone()); atomcl2.position.set(atompos,-atompos,-atompos); group = new three.object3d(); group.add(atomc); group.add(atomcl1); group.add(atomcl2); scene.add(group); container = document.getelementbyid('plan').getelementsbytagname('canvas')[0]; renderer = new three.webglrenderer({canvas: container, alpha: true}); renderer.setsize(width, height); container.onmouseout = function(event){pause = false;}; container.onmouseover = function(){pause = true;}; stats = new stats(); document.getelementbyid('plan').appendchild(stats.domelement); } function animate() { requestanimationframe(animate); render(); stats.update(); } function render() { if(!pause) { group.rotation.x += .004; group.rotation.y += .008; } renderer.render(scene, camera); } init(); animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/stats.min.js"></script> <div id="plan"> <canvas></canvas> </div>
this glitch appears on both of computers, using firefox 47.0.1 on windows 7, intel hd graphics 4000. animation runs @ 60 fps.
i had animation tested 5 other people (including myself) in google chrome, firefox, internet explorer, safari , safari ios on windows 7, windows 10, ubuntu 14.04 , mac os x , not reproduce glitch.
i not find related problem on google or wasn't able correctly describe problem in searches.
does know origin of problem , how can solve ?
thank can provide.
Comments
Post a Comment