three.js动画中的视觉故障

时间:2016-07-25 16:29:54

标签: javascript animation three.js webgl

我目前正在使用three.js(r76)编写动画,虽然我的计算机上的一切正常,但是一位朋友在运行时遇到了视觉故障。 该对象在旋转时留下痕迹,如此屏幕截图所示:

screenshot

这是一个能够重现错误的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上找不到任何相关问题,因为我无法在搜索中正确描述问题。

有谁知道这个问题的根源以及我如何解决它?

感谢您提供任何帮助。

0 个答案:

没有答案