jquery - Three.js / jquery: div 内のコントロールとアニメーション

Question

レンダラー domElement を plot_area という div 内に配置しました。

var container;
var camera, controls, scene, renderer;          
var numPoints, scale = 3;
init();
animate();

function init() {
    numPoints = document.getElementById('inputNumPoints').value;
    container = document.getElementById('plot_area');

    renderer = initRenderer(container);
    camera = initCamera();
    scene = initScene();            
    controls = initControls(camera, container, render);

    drawAxes(scale, 0x444444, scene);
}

function animate() {            
    requestAnimationFrame(animate);
    controls.update();
}

function render() {
    renderer.render(scene, camera);
}

初期化子は次のとおりです (ほとんどが標準の Three.js)。

function initRenderer(container) {
    var renderer;
    if (Detector.webgl)
        renderer = new THREE.WebGLRenderer({ antialias: true });
    else if (Detector.canvas)
        renderer = new THREE.CanvasRenderer();
    else
        Detector.addGetCanvasMessage();

    renderer.setSize(800, 800);
    container.appendChild(renderer.domElement);

    return renderer;
};

function initCamera() {
    var camera = new THREE.PerspectiveCamera(45, 1, 1, 500);
    camera.position.set(0, -10, 0);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    return camera;
};

function initScene() {
    return new THREE.Scene();
};

function initControls(camera, container, renderFunc) {
    var controls = new THREE.OrbitControls(camera, container);
    controls.addEventListener('change', renderFunc);

    return controls;
};

コントロールをまったく同じdivにアタッチしました。回転またはパンしようとすると (ただし、ズームは問題ありません)、div は完全に空白になります。ドキュメント全体をコントロールのスコープとして使用すると、すべてがうまく機能します。

グローバル名とローカル名の競合があった可能性がある (すべきではない) のではないかと思いましたが、すべてのinit*関数パラメーターの名前を変更しても問題は解決しませんでした。init*もう 1 つの推測は、返されるオブジェクトが実際には何にも関連しないように、ある種のコピー コンストラクターが返されるときに呼び出されるというものです。(はい、私は js の専門家ではありません)。フォーカスが合っていないときにリクエスト アニメーション フレームが機能しないという問題が発生した可能性があります。

いくつかの例:ドキュメント スコープのコントロール、div スコープのコントロール。

私が間違っていることに関する提案はありますか？