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*返回的对象与任何东西都不是真正相关的。（是的，我不是js的专家）。也许，当焦点失效时请求动画帧无法正常工作？

一些例子：document-scoped controls，div-scoped controls。

关于我做错了什么建议？

Three.js / jquery：div中的控件和动画

0 个答案: