Question

我在HTML文档中使用了JS的three.js库，试图基本上制作一个太阳能系统（棋盘游戏的类型）。

事情进展顺利，直到我发现3d渲染有点滞后，并认为这是一个“性能”。（在我的程序中）或计算机功能＆＃39;问题。直到我意识到，如果我让鼠标始终保持移动，那么它的渲染效果都非常好。

我有几个事件函数（使用它们来查看鼠标指向的位置），其中包含mouse_Moving_Event和mouse_Clicking_Event，其中包含render函数。

但是，我也在最后调用了渲染函数，就像我在以前的项目中所做的那样。

（这是我的代码的基本布局）。

function init() {
  *basic set up of all my camera, renderer, scene, objects,
   and event listeners, raycaster* 
}

（这里是一个简洁的事件监听器函数）

function onDocumentMouseMove( event ) {
    event.preventDefault(); 

    // setting up the mouse position in normalized device coordinates
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;         

    raycaster.setFromCamera( mouse, camera );                                       
    //update the picking ray with the camera and mouse position

    var intersects = raycaster.intersectObjects( objects ); 
    //calculating objects intersecting the picking ray

    // sets up logic for how the rollOverMesh will be copied to the 
    // position of the intersecting rayCaster
    if ( intersects.length > 0 ) {
        var intersect = intersects[ 0 ];
        rollOverMesh.position.copy( intersect.object.position );
        //( intersect.point );      
    }
    render();

}

...最后是渲染功能

function render() {
    star.rotation.y += 0.001;
    PivotObj1.rotation.y += 0.005;
    PivotObj2.rotation.y += 0.002;

    if (colonies.length > 0) {
        for (i = 0; i < colonies.length; i++)
            colonies[i].rotation.y += 0.05
    }       

    planet1.rotation.y += 0.02; 
    planet2.rotation.y += 0.002;

    renderer.render( scene, camera );
}

最后我打电话给

init();
render();

有谁能让我知道这里发生了什么？我的渲染功能似乎在事件中正常工作，而不是在外面。谢谢！

JS（Three.js）程序仅在触发事件侦听器时呈现

0 个答案: