0

我将渲染器 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。

关于我做错了什么的任何建议？

4

0 回答 0