javascript - 从node.js运行webgl JS文件

Question

我正在尝试通过学习WebGL来学习JavaScript，这应该是一个半包含的环境。我试图弄清楚如何从命令行或浏览器中运行下面的代码。我能够要求 THREE.js 库，但看起来我不能那么轻松地要求文档对象。也许我需要一个 JavaScript shell？如何让 Mozilla 或其他浏览器运行下面的 .js 代码？我有以下代码:

////////////////////////////////////////////////////////////////////////////////
/*global THREE, Coordinates, $, document, window*/


//var document = require('document');
var THREE = require('three');
var camera, scene, renderer;
var windowScale;
var cameraControls;
var clock = new THREE.Clock();

function drawGoldCube() {

    var cube;
    var cubeSizeLength = 100;
    var goldColor = "#FFDF00";
    var showFrame = true;
    var wireMaterial = new THREE.MeshBasicMaterial( { color: goldColor, wireframe: showFrame } ) ;

    var cubeGeometry = new THREE.CubeGeometry(cubeSizeLength, cubeSizeLength, cubeSizeLength);

    cube = new THREE.Mesh( cubeGeometry, wireMaterial );
    cube.position.x = 0;    // centered at origin
    cube.position.y = 0;    // centered at origin
    cube.position.z = 0;    // centered at origin
    scene.add( cube );

}

function init() {
    var canvasWidth = 846;
    var canvasHeight = 494;
    // For grading the window is fixed in size; here's general code:
    //var canvasWidth = window.innerWidth;
    //var canvasHeight = window.innerHeight;
    var canvasRatio = canvasWidth / canvasHeight;
    // SCENE
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
    // LIGHTS
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // RENDERER
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor( scene.fog.color, 1 );

    var container = document.getElementById('container');
    container.appendChild( renderer.domElement );


    // CAMERA
    camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 4000 );
    camera.position.set( -200, 200, -150 );
    // CONTROLS
    cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
    cameraControls.target.set(0,0,0);

    // draw the coordinate grid
    Coordinates.drawGrid({size:1000,scale:0.01});
    Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
    //Coordinates.drawGrid(size:1000,scale:0.01, orientation:"y"});
    Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var delta = clock.getDelta();
    cameraControls.update(delta);
    renderer.render(scene, camera);
}

init();
drawGoldCube();
animate();

它在 document.getElementById() 行失败。

我的问题是 - 我可以在浏览器之外运行它吗？如果我在命令行，我可以运行“node my_webgl.js”吗？我能够安装 THREE.js，但我不确定是否需要“文档”变量。所以顶部的这一行“var document = require('document');”如果我取消注释就会失败。

如何运行此代码？最好是从命令行。谢谢。

Answer 1

不幸的是，没有。使用 THREE.js 需要您处于支持 WebGL 的实际浏览器窗口(如果要使用后备，则需要 Canvas 支持)。