从canvas元素中本地获取three.js场景进行操作

Question

Three.js 变量（场景、相机、渲染器等）需要全局保存吗？

我创建了一个初始化 canvas 元素的函数，采用 DOM 位置和其他信息来构建场景。然后此函数传递给渲染函数，该函数调用自身意味着我永远不会丢失变量。

我面临的问题是，当我想操纵场景时，我无权访问这些变量，除非我将它们设为全局变量。目前是否有任何方法可以仅使用 canvas 元素 ID 访问和操作场景？我正在查看 canvas.getContext() 函数，但我看不到获得所需内容的方法。

我一直避免全局变量，因为我知道这通常是不好的做法，但不管怎样，在这种情况下它是最好的解决方案吗？

这里有一些代码可以帮助阐明我的意思。

function initCanvas(domPos, items){
    var scene, camera, renderer, loader;
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    /* canvas, camera, controls setup ... */

    domPos.appendChild(renderer.domElement);

    for (var i=0; i<items.length; i++){
        loader = new THREE.ObjectLoader();
        loader.load(items[i], function (obj){ scene.add(obj); });
    }
    render(renderer, scene, controls, camera);
}

function render(r, s, ctrl, cam){
    requestAnimationFrame(function(){ render(r, s, ctrl, cam); });
    r.render(s, cam);
    ctrl.update();
}

function manipCanvas(canvasID, item){
    // var scene = document.getElementByID(canvasID).scene;
    // var scene = document.getElementByID(canvasID).getContext().scene;
    loader = new THREE.ObjectLoader();
    loader.load(item, function (obj){ scene.add(obj); });
}

Answer 1

您可以尝试将其分配给 canvas：

var scene = new THREE.Scene();
document.getElementById(canvasID).scene=scene;

但我觉得在一个简单的页面中使用全局变量是可以的。

从canvas元素中本地获取three.js场景进行操作

Locally obtain three.js scene from canvas element for manipulation

html

javascript

scope

canvas

three.js