WebGL是什么？three.js是什么？
- WebGL是一个技术，是一个在浏览器中实现三维效果，展示3D模型和场景的技术。它使用JavaScript作为编程语言，调用浏览器支持的3D绘制函数，最终实现3D模型和场景。
- three.js是WebGL的实现。它对WebGL进行了抽象，提供了一套简单易用的API，帮我们过滤掉了繁琐的底层逻辑，是一个功能强大的封装库。
WebGL与OpenGL什么关系？
- OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口。简单说是一个函数库，它可以对底层的图形硬件（显卡）进行访问。
- 浏览器实现了OpenGL的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D效果可以显示在浏览器中。因此JS就可以跟浏览器配合来对显卡进行操作。
- OpenGL|ES：简易版，适合移动端。
- 早期OpenGL，进化WebGL
- WebGL应用场景：游戏、家居、建材、地图
- threejs-官网
四大组件（场景、相机、渲染器+几何体）
- 场景(scene)：类似于生活中的舞台
- 相机(camera)：相机的可视区，透视相机
- 透视相机：类似生活中的相机，进的大，远的小
- 正投影相机：远处进处一样大
- var camera = new THREE.RerspectiveCamera(fov视角, aspect宽高比, near近平面, far远平面)
- 通过fov视角, aspect宽高比, near近平面, far远平面四个参数确定可视区域
- 渲染器(renderer)：制作照片的过程
- 画家或摄影师怎么将眼前的景象画在屏幕中，这个计算的过程是渲染
- 几何体（genmetry模型）：网格模型
代码：73版本three.js
three-73.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL</title>
<script src="./js/three.min.js"></script>
<style>
html * {
padding: 0;
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
<script>
// 场景
var scene = new THREE.Scene();
// 透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
// 渲染器
var renderer = new THREE.WebGLRenderer();
// 渲染器设置大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器会把生成的照片 默认放在一个DOM节点中，我们把它加到body里
console.log(renderer)
document.body.appendChild(renderer.domElement);
// 几何体 设置立方体
var geometry = new THREE.CubeGeometry(1, 1, 1);
// 材料
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 把几何体和材料融合在一起
var cube = new THREE.Mesh(geometry, material)
// 把模型放在场景中
scene.add(cube);
// 调整相机的坐标
camera.position.z = 1.8; // 修改z轴的坐标 1.7是临界点
function render() {
cube.rotation.x += 0.1; // 改变与x轴的角度，图像立体化
// cube.rotation.z += 0.1; // 改变与z轴的角度，图像立体化
renderer.render(scene, camera);
requestAnimationFrame(render); // 重复执行，图形滚动起来，可以把参数传入的函数重复执行，可以达到每秒60帧的效果
}
render();
</script>
</html>
