我目前正在使用three.js(r76)编写动画,虽然我的计算机上的一切正常,但是一位朋友在运行时遇到了视觉故障。 该对象在旋转时留下痕迹,如此屏幕截图所示:
这是一个能够重现错误的MWE。
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>
这个故障出现在他的两台计算机上,使用Windows 7上的Firefox 47.0.1和Intel HD Graphics 4000.动画以60 FPS运行。
我在谷歌Chrome,Firefox,Internet Explorer,Safari和Safari中为5个其他人(包括我自己)测试了这个动画,适用于Windows 7,Windows 10,Ubuntu 14.04和Mac OS X上的iO,我们无法再现这个故障
我在Google或SO上找不到任何相关问题,因为我无法在搜索中正确描述问题。
有谁知道这个问题的根源以及我如何解决它?
感谢您提供任何帮助。