console 命令行工具 X clear

console

function init() {
  var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
  });
  renderer.setClearColor(0x000000);
  var scene = new THREE.Scene();

  // camera
  var camera = new THREE.OrthographicCamera( - 2.5, 2.5, 1.875, -1.875, 0.1, 100);
  camera.position.set(5, 50, 20);
  camera.lookAt(new THREE.Vector3(1, 0, 0));
  scene.add(camera);

  // draw axes to help you understand the coordinate
  drawAxes(scene);


function makeTextSprite( message, parameters )
    {
        if ( parameters === undefined ) parameters = {};
        var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
        var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
        var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4;
        var borderColor = parameters.hasOwnProperty("borderColor") ?parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
        var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?parameters["backgroundColor"] : { r:255, g:255, b:255, a:1.0 };
        var textColor = parameters.hasOwnProperty("textColor") ?parameters["textColor"] : { r:0, g:0, b:0, a:1.0 };

        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.font = "Bold " + fontsize + "px " + fontface;
        var metrics = context.measureText( message );
        var textWidth = metrics.width;

        context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
        context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";

        context.lineWidth = borderThickness;
        roundRect(context, borderThickness/2, borderThickness/2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8);

        context.fillStyle = "rgba("+textColor.r+", "+textColor.g+", "+textColor.b+", 1.0)";
        context.fillText( message, borderThickness, fontsize + borderThickness);

        var texture = new THREE.Texture(canvas) 
        texture.needsUpdate = true;

        var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
        var sprite = new THREE.Sprite( spriteMaterial );
        sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
        return sprite;  
    }

// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r) 
{
    ctx.beginPath();
    ctx.moveTo(x+r, y);
    ctx.lineTo(x+w-r, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+r);
    ctx.lineTo(x+w, y+h-r);
    ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
    ctx.lineTo(x+r, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h-r);
    ctx.lineTo(x, y+r);
    ctx.quadraticCurveTo(x, y, x+r, y);
    ctx.closePath();
    ctx.fill();
	ctx.stroke();   
}
  var spritey = makeTextSprite( " World! ", 
		{ fontsize: 32, fontface: "Georgia", borderColor: {r:0, g:0, b:255, a:1.0} } );
	spritey.position.set(10,0,0);
	scene.add( spritey );

  renderer.render(scene, camera);
}

function drawAxes(scene) {
  // x-axis
  var xGeo = new THREE.Geometry();
  xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
  xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
  var xMat = new THREE.LineBasicMaterial({
    color: 0xff0000
  });
  var xAxis = new THREE.Line(xGeo, xMat);
  scene.add(xAxis);

  // y-axis
  var yGeo = new THREE.Geometry();
  yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
  yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
  var yMat = new THREE.LineBasicMaterial({
    color: 0x00ff00
  });
  var yAxis = new THREE.Line(yGeo, yMat);
  scene.add(yAxis);

  // z-axis
  var zGeo = new THREE.Geometry();
  zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
  zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
  var zMat = new THREE.LineBasicMaterial({
    color: 0x00ccff
  });
  var zAxis = new THREE.Line(zGeo, zMat);
  scene.add(zAxis);
}

<body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px">
  </canvas>
</body>

本项目引用的自定义外部资源

three.js