导读
该篇文章呢，主要用于记录一个简单的入门级Three.js小案例，主要涉及到场景、摄像机的种类及摄像机创建，几何体创建，几何体运动，材质贴图添加，窗口渲染内容自适应这几个方面来开发下面这个小案例，当然也包括相关实现方法的参数的详解。帮助自己知识复习，如果能帮助大家入门Three.js这门浏览器端的WebGL神奇强大炫酷框架中去，那就更好了。
首选我们来看一下，Three.js的基本概念和简介：
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能
什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript来写3D程序的意思。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。
代码开发阶段
1、首先我们需要创建Scene场景，Scene 允许我们设置Three.js渲染的内容以及位置。我们可以在这个scene场景中放置物体对象，灯光和照相机等等 ：
// 1. 首先我们需要创建场景 实例化THREE下面的方法Scenescene = new THREE.Scene();
2、再接着，我们需要创建摄像机，目前THREEJS中里面的摄像机及有两种类别，分别是透视型3D摄像机，正交投影摄像机。如下图所示：
左侧的就是我们的透视摄像机，右侧的就是我们的正交投影摄像机；这里呢，我们采用第一种，模拟人眼视角的透视型摄像机，代码如下：
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerWidth, 0.1, 1000);
好，接着我们来介绍下这个PerspectiveCamera(fov, aspect, near, far)方法的参数的含义及作用：
fov可视角度，一般 60-90，人眼180左右，默认 45aspect为width/height,通常设置为 canvas元素的高宽比。near近端距离， 默认0.1far远端距离，默认1000
只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。
3、接着往下，我们就需要创建THREEJS渲染器，然后把渲染器append到我们的页面中去，如下：
renderer = new THREE.WebGLRenderer({antialias: true }); // antialias 平滑 抗锯齿 renderer.setSize(window.innerWidth, window.innerHeight);// append 页面中去document.body.appendChild(renderer.domElement)
这里呢，附上常用的WebGLRenderer参数配置
let renderer = new THREE.WebGLRenderer({antialias: true, // true/false表示是否开启反锯齿alpha: true, // true/false 表示是否可以设置背景色透明precision: 'highp', // highp/mediump/lowp 表示着色精度选择premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲maxLights: 3, // 最大灯光数stencil: false // false/true 表示是否使用模板字体或图案});
4、创建几何模型，并给这些几何模型贴上好看的纹理贴图：
// 创建矩形盒子const geometry = new THREE.BoxGeometry( 2, 2, 2 );// 创建纹理贴图const texture = new THREE.TextureLoader().load('imgs/wenli_03.png')const material = new THREE.MeshBasicMaterial( {map: texture } );cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 6;
5、实现动画不断渲染，让几何模型不断在空间旋转：
// 动画 animatefunction animate(){requestAnimationFrame(animate);// 旋转cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}
6、实现窗口缩放，尺寸内容模型响应式，代码如下：
// 尺寸发生变化function onWindowResize(){camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}window.addEventListener('resize',()=>{onWindowResize();})
结语
好，这个基础案例，到这里就结束了，该篇文章主要涉及到一些THREEJS相关的一些基础知识的概念模型建立，更多好玩酷炫的效果，需要大家去到官网查看相关的案例源代码啦 ~~
