小编Chr*_*ers的帖子

我想创建类似于旧鼠标轨迹的效果,其中div被延迟但跟随光标.

通过使用set interval将动画触发到光标的坐标,我已经相当接近了.

$("body").mousemove(function (e) {
    if (enableHandler) {
        handleMouseMove(e);
        enableHandler = false;
    }
});

timer = window.setInterval(function(){
    enableHandler = true;
}, 250);

function handleMouseMove(e) {

  var x = e.pageX,
      y = e.pageY;

      $("#cube").animate({
        left: x,
        top: y
      }, 200);

}

的jsfiddle

现在仍然存在两个问题:

1. '追逐'div非常跳跃(因为需要使用设置间隔)

2. 如果在触发动画之前鼠标移动停止,则div将保留在远离光标的位置.

我希望能够在场景设置中实现条件，以提供不同的网格和材料或较低的多边形模型导入。这方面很简单，但我正在寻找检测渲染three.js场景的系统能力的最佳或最有效（/最佳实践）方法？

供参考：关于这个问题的答案（如何检查 webgl(three.js) 的客户端性能）建议使用插件，如所述在场景创建之后而不是之前检查性能。

此外，这里有一个很好的方法（使用 javascript 来检测设备 CPU/GPU 性能？），它涉及测量渲染循环的速度作为检测性能的一种手段，但这是我们能提出的最佳解决方案吗？

一如既往的感谢！

我对PIXI.js和自定义着色器都是陌生的，所以在这里我有点儿不深。

有一个GLSL着色器（由DonKarlssonSan提供），我想将其转换为PIXI.js来比较性能，任何帮助将不胜感激！

var container;
var camera, scene, renderer;
var uniforms;
var startTime;

init();
animate();

function init() {
  container = document.getElementById('container');

  startTime = Date.now();
  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry(16, 9);

  uniforms = {
    iGlobalTime: { type: "f", value: 1.0 },
    iResolution: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {

    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent

  } );

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh); …

简单的一个肯定在这里..

mybutton.addEventListener(MouseEvent.MOUSE_DOWN, thefunction);

function thefunction(event:MouseEvent):void {
    gotoAndPlay(** frame on child movie clip **);
}

我如何定位框架？