准备工作

three.js库
https://threejs.org/build/three.js
(ctrl+s保存后引入)
main.js
空文件，逻辑在这里实现
demo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three.js基础入门</title>
        <style>
            body { margin: 0;}
        </style>
    </head>
    <body>
        <canvas id="canvas-wrap"></canvas>
    </body>
    <script src="js/three.js"></script>
    <script src="js/main.js"></script>
</html>

1.画布

// 获取画布对象
var oCanvas = document.getElementById('canvas-wrap');
// 定义画布的宽
var c_width = 500;
// 定义画布的高
var c_height = 500;

2.创建场景、相机、渲染器

//场景：scene
var scene = new THREE.Scene();
//相机：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//设置相机z轴位置,(正值z轴往屏幕外)
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
  canvas:  oCanvas
});
//设置渲染器、画布的宽高
renderer.setSize(c_width, c_height);

3.创建3D立方体

//geometry几何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材质、材料
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
//立方体cube
var cube = new THREE.Mesh(geometry, material);

颜色0x+颜色值ffffff(16进制)白色
mesh意思是匹配
定义好几何形状构造geometry 和要使用的材料material 后，将两者传入THREE.Mesh()方法中进行匹配、结合后，便可组成一个cube立方体对象，这时一个立方体就绘制完成。

4.将3D立方体对象添加到场景中，然后进行渲染

//将创建好的立方体cube添加到场景中
scene.add(cube);
//渲染场景和相机
renderer.render(scene, camera);

创建成功后效果:

cube.png

总结

理解：

假设我们到一个沙滩上拍海鸥，
那么沙滩便是我们的场景scene
而拍照则需要用到相机camera
我们将相机打开，摆放到能排到海鸥的位置（设置camera坐标）
接着我们要设置相机的是如何进行画面渲染的，假设它里面有个渲染器renderer，
渲染器需要设置参数和大小（这样才能确定拍出来的照片有多大）
然后海鸥Cube便是我们要拍进去的对象，
而海鸥的本质形状构造是geometry，内在本质便是材料material
有了形状和材料，我们就可以用合成器THREE.Mesh()将其放入，合成一个完整的海鸥
我们将海鸥放入我们拍摄的场景里，
打开相机开始拍照，便完成了拍摄任务。
而我们人眼看相机所看到的便是浏览器所呈现给我们的，照片底胶便可以理解为canvas画布。

知识拓展

场景scene: https://www.jianshu.com/p/4ccbcf839b7f
相机camera：待更
渲染器renderer：待更
几何体geometry：待更
材料material：待更

以下是源代码

main.js

// 获取画布对象
var oCanvas = document.getElementById('canvas-wrap');
// 定义画布的宽
var c_width = 500;
// 定义画布的高
var c_height = 500;

//场景：scene
var scene = new THREE.Scene();
//相机：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//设置相机z轴位置
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
  canvas:  oCanvas
});
//设置渲染器、画布的宽高
renderer.setSize(c_width, c_height);

//geometry几何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材质、材料
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
//立方体cube
var cube = new THREE.Mesh(geometry, material);

//将创建好的立方体cube添加到场景中
scene.add(cube);
//渲染场景和相机
renderer.render(scene, camera);

因为立方体和相机处在正对位置上，所以我们看不到立方体的其他面
为了方便看清，这里做如下修改

//将立方体的材料改为Normal
var material = new THREE.MeshNormalMaterial({});
//...

//添加辅助坐标系
var axesHelper = new THREE.AxesHelper(4);
scene.add(axesHelper);
//这里为了方便查看，坐标系和立方体的位置设置相同
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;

修改后cube.png

源代码： main.js

// 获取画布对象
var oCanvas = document.getElementById('canvas-wrap');
// 定义画布的宽
var c_width = 500;
// 定义画布的高
var c_height = 500;

//场景：scene
var scene = new THREE.Scene();
//相机：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//设置相机z轴位置
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
  canvas:  oCanvas
});
//设置渲染器、画布的宽高
renderer.setSize(c_width, c_height);

//geometry几何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材质、材料
// var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var material = new THREE.MeshNormalMaterial({});
//立方体cube
var cube = new THREE.Mesh(geometry, material);

// 辅助坐标系
var axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
// 设置立方体、辅助坐标系位置
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;

//将创建好的立方体cube添加到场景中
scene.add(cube);
//渲染场景和相机
renderer.render(scene, camera);

【Three.js】01 基础入门