console 命令行工具 X clear

console

let scene = new THREE.Scene();  // 创建场景对象 scene；

/**
 * 创建网格模型
 */
let geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );  // 创建一个长、宽、高都为100的立方体几何对象 Geometry;
let material = new THREE.MeshLambertMaterial(
    { color: 0x00ff00 }
);        //创建材质对象 Material;
let mesh = new THREE.Mesh( geometry, material );      // 网格模型对象 mesh；
scene.add( mesh );            // 将网格模型对象添加到场景中；

/**
 *  光源设置
 */
// 点光源；
let point = new THREE.PointLight( 0xffffff );
// 点光源位置；
point.position.set( 400, 200, 300 );
// 将点光源添加到场景中;
scene.add( point );

// 环境光
let ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );

/**
 * 相机设置
 */
let width = window.innerWidth;                // 视窗口的宽度；
let height = window.innerHeight;              // 视窗口的高度；
let k = width / height;  
let s = 200;                                  // 三维场景显示范围控制系数，系数越大，显示范围越大；
// 创建相机的位置
let camera = new THREE.OrthographicCamera( -s*k, s*k, s, -s, 1, 1000 );
camera.position.set( 200, 200, 200 );           // 设置相机的位置；
camera.lookAt( scene.position );              // 设置相机的方向（指向的场景对象）；

/**
 * 渲染器设置
 */
let renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );           // 设置渲染范围；
renderer.setClearColor( 0xb9d3ff, 1 );       // 设置背景颜色；
document.body.appendChild( renderer.domElement );        // body元素中插入canvas 对象;

// renderer.render( scene, camera );
function render() {
    renderer.render( scene, camera );        // 执行渲染操作     指定场景，相机作为参数；
    mesh.rotateY( 0.02 ); 
    mesh.rotateX( 0.02 );
    mesh.rotateZ( 0.02 );                   // 每次绕Y轴旋转0.01弧度；
    requestAnimationFrame( render );         // 请求再次执行渲染函数 render；
}

render();

// setInterval( "render()", 20 );

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<title>第一个three.js文件_WebGL三维场景</title>
</head>
<body>
	
</body>
</html>

body {
    margin: 0;
    overflow: hidden;
}

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

three.min.js