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（）行失败。

我的问题是 - 我可以在浏览器外运行吗？如果我在命令行，我可以运行＆＃34;节点my_webgl.js＆＃34;？我能够安装THREE.js，但我不确定我是否可以要求＃34;文件＆＃34;变量。所以这一行在顶部＆＃34; var document = require（＆＃39; document＆＃39;）;＆＃34;如果我取消注释它就会失败。

如何运行此代码？最好来自命令行。感谢。

Answer 1

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

从node.js运行webgl JS文件

1 个答案: