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

【问题标题】：Locally obtain three.js scene from canvas element for manipulation从canvas元素本地获取three.js场景进行操作
【发布时间】：2015-05-09 20:00:19
【问题描述】：

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

我创建了一个函数来初始化画布元素，获取 DOM 位置和其他信息来构建场景。然后这个函数传递给一个渲染函数，它调用自己，这意味着我永远不会丢失变量。

我面临的问题是，当我想操纵场景时，我无法访问这些变量，除非我将它们设为全局变量。目前是否有任何方法可以仅使用画布元素 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); });
}

【问题讨论】：

标签： javascript html canvas scope three.js

【解决方案1】：

您可以尝试将其分配给画布：

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

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

【讨论】：