Question

我已经向球体添加了变换控件，因此可以在场景中移动它。我还添加了轨道控件来平移场景，效果很好。当场景第一次加载时，没有滞后并且效果很好，但是一旦我移动球体，就会有很大的滞后。

我可以解决这个问题，但是我真正想解决的问题是，即使我取消选择球体并且不再移动它，仅使用轨道控件时仍然存在滞后。

为什么即使我没有积极使用转换控件，延迟仍会持续吗？

// val is part of doc1
// val2 is part of some other rapidjson::Document
// alloc should get by doc1.getAllocator(), but doc1 has already been destroyed 
val.CopyFrom(val2, alloc)

我尝试通过将以下内容放在var renderer, scene, camera, controls; init(); var geometry = new THREE.SphereGeometry( .025, 5, 5 ); var material = new THREE.MeshPhongMaterial( {color: 0xffffff} ); var sphere = new THREE.Mesh( geometry, material ); addControls(sphere,"translate"); scene.add(sphere); render(); function addControls(object, type) { var transformControl = new THREE.TransformControls( camera, renderer.domElement ); transformControl.addEventListener( 'change', render ); transformControl.addEventListener( 'dragging-changed', function ( event ) { controls.enabled = ! event.value; } ); transformControl.attach( object ); transformControl.setMode( type ); transformControl.setSpace( "local" ); scene.add( transformControl ); } function init() { // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(WIDTH, HEIGHT); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0xffffff); document.body.appendChild(renderer.domElement); // Camera camera = new THREE.PerspectiveCamera(100, WIDTH / HEIGHT, 0.1, 1000); camera.position.set(500, 0, 0); // Orbit Controls controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxDistance = 5; // Scene scene = new THREE.Scene(); } function render() { renderer.render(scene, camera); requestAnimationFrame(render); }中来从场景中删除变换控件：

addControls()

将球体稍微移动一下后，我将按一个键，变换控件将消失，但是滞后仍在继续。我希望在移动球体时可能会有一些滞后，但是当不移动球体时，它会消失。

相反，即使我仅使用轨道控件，仍然存在滞后。

如何使这种滞后最小化？

Answer 1

欢迎使用StackOverflow。

原因是因为每次控件获得requestAnimationFrame事件时，您都在堆叠change的调用。您调用render函数，该函数依次要求在每次更新帧时再次调用它。您可以想象它爆炸的速度有多快。即使删除了转换控件，这也会导致延迟。

要解决此问题，应将渲染功能与动画循环分离。

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  renderer.render( scene, camera );

}

现在，对变换控件的更改将仅呈现场景，而不会与动画循环混淆。

JSFiddle Example

Three.js转换控件导致滞后

1 个答案: