从node.JS运行webgl JS文件

Question

我正试图通过学习WebGL来学习JavaScript，WebGL应该是一个半封闭的环境。我正试图弄清楚如何从命令行或浏览器中运行下面的代码。我可以需要THRE.js库，但看起来我不太容易需要文档对象。也许我需要一个JavaScript外壳？如何让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（）行失败。

我的问题是-我可以在浏览器外运行吗？如果我在命令行，我可以运行"nodemy_webgl.js"吗？我可以安装THRE.js，但我不确定是否需要一个"文档"变量。因此，如果我取消注释，顶部的这行"var document=require（'document'）；"将失败。

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

Answer 1

不幸的是，没有。使用THRE.js需要您处于支持WebGL的实际浏览器窗口中（如果要使用回退，则需要画布支持）。