three.js（3D）

three.js（3D）

官网
webgl不好用于是诞生了three.js
3D三要素：渲染器、相机、场景

<script src="https://cdn.bootcss.com/three.js/92/three.js"><script> //先引入three.js库
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"><script> //先引入stats插件
var renderer, camera, scene, geometry, material, mesh; //声明全局变量
stats = new Stats();//实例化一个stats对象
document.body.appendChild(stats.dom);//将对象内生成的dom添加到页面中
//初始化渲染器
function initRenderer() {
	renderer = new THREE.WebGLRenderer(); //实例化渲染器
	renderer.setSize(window.innerWidth, window.innerHeight);//设置宽和高
	Document.body.appendChild(renderer.domElement);//添加到dom
}
//初始化场景
function initScene() {
	scene = new THREE.Scene(); //实例化场景
}
//初始化相机
function initCamera() {
	camera = new THREE.PerspectiveCamera(45, window.innerWidth /  window.innerHeight, 0.1, 200); //实例化相机,设置相机视野、宽高比、近裁面、远裁面
	camera.position(0, 0, 15);//设置相机位置xyz
}
//创建模型
function initMesh() {
	geometry = new THREE.BoxGeometry(2, 2, 2); //创建几何体
	material = new THREE.MeshNormalMaterial(); //创建材质
	mesh = new THREE.Mesh(geometry, material); //创建网格
	scene.add(mesh);//将网格添加到场景
}
//创建动画
function animate() {
	requestAnimationFrame(animate); //循环调用函数
	mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
	mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
	stats.update(); //性能监测插件
	renderer.render(scene, camera); //渲染界面
}
//初始化函数，页面加载完成时调用
function init() {
	initRenderer(); //渲染
	initScene(); //场景
	initCamera(); //相机
	initMesh(); //物体
	animate(); //旋转，动画
}