将绘制对象场景图添加到main.js

Question

我正在使用HTML画布创建场景，我有一个希望绘制到画布上的对象。我正在使用场景图将转换应用于我的自定义绘制对象。

我已经在我的自定义对象中创建了一个场景图以应用我的本地转换，如下所示

class House 
{
constructor(pPosition, pScale, pRotation)
{
    this.setPosition(pPosition);
    this.setRotation(pRotation);
    this.setScale(pScale);
    this.initialiseSceneGraph();
}
getPosition()
{
    return this.mPosition;
}
setPosition(pPosition)
{
    this.mPosition = pPosition;
}
getRotation()
{
    return this.mRotation;
}
setRotation(pRotation)
{
    this.mRotation = pRotation;
}
getScale()
{
    return this.mScale;
}
setScale(pScale)
{
    this.mScale = pScale;
}
getSceneGraph()
{
    return this.mHouseSceneGraph;
}
setSceneGraph(pHouseSceneGraph)
{
    this.mHouseSceneGraph = pHouseSceneGraph;
}
initialiseSceneGraph()
{
    var transMatrix, transVector, rotationMatrix, scaleMatrix, scaleVector;
    // transVector = new Vector (0,0,0);
    transMatrix = Matrix.createTranslation(this.mPosition);
    this.mTransNode = new sceneGraph(transMatrix);
    rotationMatrix = Matrix.createRotation(this.mRotation);
    this.mRotationNode = new sceneGraph(rotationMatrix);
    //scaleVector = new Vector (1, 1, 0);
    scaleMatrix = Matrix.createScale(this.mScale);
    this.mScaleNode = new sceneGraph(scaleMatrix);

    var identity = new Matrix(Matrix.createIdentity());
    this.mHouseSceneGraph = new sceneGraph(identity);


    this.mHouseSceneGraph.addChild(this.mTransNode);
    this.mTransNode.addChild(this.mRotationNode);
    this.mRotationNode.addChild(this.mScaleNode);


}
drawWall(pContext, pMatrix)
{  
    //main house body
    pContext.beginPath();
    pContext.fillStyle = '#ffffff';
    pContext.strokeStyle ='#000000';
    pContext.moveTo(0, 0); // position - middle bottom
    pContext.lineTo (-100, 0); // position - bottom left
    pContext.lineTo (-100, -100); // position - top left
    pContext.lineTo (+100, -100); // position - top right
    pContext.lineTo (+100, 0); // position - bottom right
    pContext.closePath(); // used to close the shape
    pContext.fill();
    pContext.stroke();

}
moveWall(pContext, pMatrix)
{
    var transMatrix = Matrix.createTranslation(new Vector(0, 0, 0));
    this.mWallTransNode = new sceneGraph(transMatrix);
    this.mScaleNode.addChild(this.mWallTransNode);
    this.mWallTransNode.addChild(this.drawWall);
}
drawRoof(pContext, pMatrix)
{
    //house roof
    pContext.beginPath();                
    pContext.fillStyle = '#ff0000';
    pContext.strokeStyle ='#000000';
    pContext.moveTo (-100, 0); //position - top left
    pContext.lineTo (0, -100); //position - top 
    pContext.lineTo (+100, 0); //position - top right
    pContext.closePath();
    pContext.fill();
    pContext.stroke();
    //pMatrix.setTransform(pContext);
}
moveRoof()
{
    var transMatrix = Matrix.createTranslation(new Vector(0, -100, 0));
    this.mRoofTransNode = new sceneGraph(transMatrix);
    this.mScaleNode.addChild(this.mRoofTransNode);
    this.mRoofTransNode.addChild(this.drawRoof);
}
drawDoor(pContext, pMatrix)
{ 
    //house door
    pContext.beginPath();
    pContext.fillStyle = '#00ff00';
    pContext.strokeStyle ='#000000';
    pContext.moveTo (-25, 0);
    pContext.lineTo (-25, -75);
    pContext.lineTo (+25, -75);
    pContext.lineTo (+25, 0);
    pContext.closePath();
    pContext.fill();
    pContext.stroke();
}
moveDoor()
{
    var transMatrix = Matrix.createTranslation(new Vector(0, 0, 0));
    this.mDoorTransNode = new sceneGraph(transMatrix);
    this.mScaleNode.addChild(this.mDoorTransNode);
    this.mDoorTransNode.addChild(this.drawRoof);
}
drawWindow(pContext, pMatrix)
{
    pContext.beginPath();
    pContext.fillStyle = '#0000ff';
    pContext.strokeStyle ='#000000';
    pContext.moveTo (-15, -20); 
    pContext.lineTo (-15, + 20); 
    pContext.lineTo (+15, +20);
    pContext.lineTo (+15, -20);
    pContext.closePath();
    pContext.fill();
    pContext.stroke();
}
moveLeftWindow()
{
    var transMatrix = Matrix.createTranslation(new Vector(-60, -50, 0));
    this.mLeftWindowTransNode = new sceneGraph(transMatrix);
    this.mScaleNode.addChild(this.mLeftWindowTransNode);
    this.mLeftWindowTransNode.addChild(this.drawWindow);
}
moveRightWindow()
{
    var transMatrix = Matrix.createTranslation(new Vector(-60, -50, 0));
    this.mRightWindowTransNode = new sceneGraph(transMatrix);
    this.mScaleNode.addChild(this.mRightWindowTransNode);
    this.mRightWindowTransNode.addChild(this.drawWindow);
}
}

我遇到的问题是，当我想将房屋场景图添加到main.js文件中的世界场景图时，出现错误TypeError: House.getSceneGraph is not a function。我的main.js代码如下

function onload()
{
var mainCanvas, mainContext, housePosition, houses, sunPostion, suns;
// this function will initialise our variables
function initialiseCanvasContext()
{
    mainCanvas = document.getElementById('mainCanvas');
    if (!mainCanvas){
        alert ('Error: cannot find canvas element');
        return;
    }
    mainContext = mainCanvas.getContext('2d');
    if (!mainContext){
        alert('error: failed to get context');
        return;
    }

    var transVector = new Vector (mainCanvas.width / 2, mainCanvas.height / 2, 0);
    var transMatrix = Matrix.createTranslation(transVector);
    var mSceneGraphRoot = new sceneGraph(transMatrix);

    var houseSceneGraph = new sceneGraph;
    houseSceneGraph = House.getSceneGraph();
    mSceneGraphRoot.addChild(houseSceneGraph);
}
function draw()
{
    var i, j;
    mainContext.fillStyle = "#ffffff";
    mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);
    // mainContext.font = "40pt Century Gothic";
    // mainContext.fillStyle = "#ffffff"
    // mainContext.fillText("hello world!", 150,100);
    mainContext.lineWidth = 5;
    mainContext.lineJoin = 'round';

    mSceneGraphRoot.draw(mainContext, Matrix.createIdentity());
}
initialiseCanvasContext();
draw();
}
window.addEventListener('load', onload, false);

我觉得getSceneGraph()是正确的，所以我不确定为什么它不起作用。

感谢您提供任何帮助，解释为什么它不起作用