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

分手后的思念是犯贱 2023-06-14 10:36 23阅读 0赞

## 导读 ##

该篇文章呢，主要用于记录一个简单的入门级`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摄像机，正交投影摄像机。如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kYW1pYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
左侧的就是我们的透视摄像机，右侧的就是我们的正交投影摄像机；这里呢，我们采用第一种，模拟人眼视角的透视型摄像机，代码如下：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kYW1pYW8uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120100421556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9kYW1pYW8uYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70