Three.js新手入门实践案例解析

导读

该篇文章呢，主要用于记录一个简单的入门级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下面的方法Scene
scene = 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左右，默认 45
• aspect 为width/height,通常设置为 canvas元素的高宽比。
• near 近端距离， 默认0.1
• far 远端距离，默认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、 实现动画不断渲染，让几何模型不断在空间旋转：

// 动画 animate
function 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相关的一些基础知识的概念模型建立，更多好玩酷炫的效果，需要大家去到官网查看相关的案例源代码啦 ~~