你既然来到这里了，肯定是在看web前端构建3d相关内容了。本人也是一个菜鸟，所以在学习webgl相关内容时整理一些笔记出来，方便自己查阅，当然也希望可以让你有所收获，本文默认你基本了解过相关内容（web内容）
好了废话不多说了。浏览器构建3d，众所周知浏览器也就是电脑是一个2d的平面。用坐标系来说也就是x轴和y轴。如果要构建3d的话那就必须要一个z轴。这样才能成为一个3d的空间
首先说一下webgl的坐标系，webgl是下图中的右手坐标系，也就是以浏览器左上角为原点右侧为x轴的正方向， 上方为y轴的正方向，z轴则是朝向浏览器外面。
介绍完坐标系之后接下来说下创建一个3d的一些原理，浏览器是怎么创建一个3d的页面的需要那些东西呢？
浏览器其实还只是渲染了一个2d的页面，只是让我们看起来有一些立体的效果，这其实跟我们显示中的眼睛一样 所以 webgl也需要一个眼睛来观看这些东西。这就是webgl中一大组件 也就是相机，相机可以理解为现实中的相机。有了相机肯定不够，因为没有东西可以拍啊，所以就需要一个景点来拍摄，这也就是webgl中的场景了，ok好了 现在场景也有了，相机也有了，但是需要一个东西来整合一下给浏览器渲染，这就是渲染器了。
介绍完了webgl的场景，相机，渲染器了，那么接下来我们把前面说的东西用代码实现出来看一下。
首先创建一个场景
var scene = new THREE.Scene();
就这么一行代码就创建了一个场景
接着创建一个相机
var camera = new THREE.PerspectiveCamera(45, width/height,1,1000);
这样就创建了一个带透视效果的相机，有关相机相关内容会单独出一文做介绍，在此不做具体介绍
最后创建一个渲染器
var renderer = new THREE.WebGLRenderer();
渲染器也创建出来了，那么渲染器是怎么整合相机和场景的呢，请看👇的方法😁
renderer.render(scene,camera);
这样就实现了一个3d创建的大的流程。
当然你肯定也知道，我们没有创建任何3d的物体那么渲染出来的是啥呢，肯定是什么也没有的啦嘻嘻😁
接下来讲的就是创建一个物体了。接下来我们先创建一个矩形几何体当然是2d的，饭要一口一口吃，我们先学习一些简单的。
var geometry = new THREE.PlaneGeometry(1,1);
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer.render(scene, camera);
我们解释一下上面的代码创建一个物体需要什么呢，在现实世界中创建一个水壶, 首先需要一个模具，然后需要一些材料如泥土（当然我比较业余，可能水壶的造法不是这样的。我只是用来举个例子，大家请勿追究😁）这样就能创建一个简陋的水壶了。
在webgl中其实也是大同小异的， 上面定义的geometry变量则是创建了一个模具，而material则是一些材料，在webgl中material的定义有好多种以后也会出一文来具体介绍。本例中使用的是基础材质，使用了单一颜色比如 纯白色， 而创建的mesh则是创建了一个网格，创建3d图形有好多种方法,而最常用的就是使用网格，网格是由一个或多个多边形组成的物体，3d网格通常也被叫做模型(model)。
ok网格建好之后，剩下的就是放到场景里面，然后告诉浏览器渲染一下就行了。接下来就可以看到我们的矩形了。
接下来是完整的代码直接复制然后保存为html即可运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webgl 使用threejs创建一个矩形</title>
<style>
#container{
width: 100%;
height: 600px;
background: #000000;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../static/three.js"></script>
<script>
window.onload = function() {
// 定义属性
var container = document.getElementById('container');
console.log(container);
var width = container.clientWidth;
var height = container.clientHeight;
//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);// 设置大小
container.appendChild(renderer.domElement);// 渲染器元素追加到页面
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 4000);
// 定义相机的位置
camera.position.set(0,0,3.333);
// 创建矩形
var geometry = new THREE.PlaneGeometry(1,1); // 创建矩形
var material = new THREE.MeshBasicMaterial({
color: 0xffffff
}); // 设置材质
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer.clear();
renderer.render(scene, camera)
}
</script>
</body>
</html>
如果运行不起来或者有什么疑问可以留言。 代码中three.js可以去网上下载。
如果有那里说的不对 请大家多多指教😁
