Three.js初学（3）

动画渲染循环

1. 请求动画帧

requestAnimationFrame实现周期性循环执行
requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能,对于部分高刷新率的电脑硬件设备，也是有可能超过60次的。

let i = 0;
function render() {
    i+=1;
    console.log('执行次数'+i);
    requestAnimationFrame(render);//请求再次执行函数render
}
render();

2. 旋转动画

动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。以下案例代码会将几何体沿着y轴旋转。rotateY会影响几何体旋转的速度，你也写成rotateX/Z。

// 渲染函数
function render() {
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();

设置了渲染循环,相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);，毕竟渲染循环一直在执行。

Canvas画布布局和全屏

threejs渲染输出的结果就是一个Cavnas画布，canvas画布也是HTML的元素之一，这意味着three.js渲染结果的布局和普通web前端习惯是一样的。

全屏布局

const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
document.body.appendChild(renderer.domElement);

同时要注意全局的css样式设置

<style>
    body{
        overflow: hidden;
        margin: 0px;
    }
</style>

常见几何体

three.js的材质默认正面可见，反面不可见,对于矩形平面PlaneGeometry、圆形平面如果你想看到两面，可以设置side: THREE.DoubleSide。

new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});

渲染器设置

渲染器锯齿属性

可以使得渲染的几何体质量更好更清晰一点。

const renderer = new THREE.WebGLRenderer({
  antialias:true,
});

设置设备像素比

如果你在渲染的过程中需要画布显示不清晰或者模糊的问题

// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);

设置背景颜色

renderer.setClearColor(0x444444, 1); //设置背景颜色

效果如下图所示：

GUI.js库

它是一个前端库，对HTML、CSS和JavaScript进行了封装，可以借助dat.gui.js快速创建控制三维场景的UI交互界面。

1. 库的引入

github地址：https://github.com/dataarts/dat.gui

npm地址：https://www.npmjs.com/package/dat.gui

当然threejs官方案例扩展库中也提供了gui.js。

// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

2. 如何使用

初步调试

创建GUI对象

创建完成之后运行，就会发现右上角多了一个交互界面。

// 实例化一个gui对象
const gui = new GUI();

改变GUI界面默认的style属性

//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';

.add()方法

执行gui的.add()方法可以快速创建一个UI交互界面，可以用来改变一个JavaScript对象属性的属性值。
格式：.add(控制对象，对象具体属性，其他参数)

//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
    x: 30,
    y: 60,
    z: 30,
};
// gui界面上增加交互界面，改变obj对应属性
gui.add(obj, 'x', 0, 100); 
gui.add(obj, 'y', 0, 100);
gui.add(obj, 'z', 0, 100);

后面的两个参数，代表着这个拖动条的区间范围数值。但这个时候拖动只有数值变化，几何体位置依然不变，如果想要变化，就将obj对象换成mesh.position或者可以使用onchange方法。

gui.add(mesh.position, 'x', 0, 100);
gui.add(obj, 'x', 0, 100).onChange(function(value){
    mesh.position.x = value;
	// 你可以写任何你想跟着obj.x同步变化的代码
});

光照强度的调试

在调试场景渲染效果的时候，比如光照的强度，人大脑的CPU是没有能力通过光照参数算出来模型渲染效果的，一般来说你先大概给一个经验值，然后通过gui在这个大概值的基础上下浮动可视化调试。

// 光照强度属性.intensity
console.log('ambient.intensity',ambient.intensity);
// 通过GUI改变mesh.position对象的xyz属性
gui.add(ambient, 'intensity', 0, 2.0);

ambient是我们之前所设置的环境光，详情可看我的 另一篇博客

进阶调试

.name()方法

在创建的交互界面之后，会默认显示所改变属性的名字，为了通过交互界面更好理解你改变的某个对象属性，可以通过.name()方法改变gui生成交互界面显示的内容。

gui.add(ambient, 'intensity', 0, 100.0).name('环境光强度');
gui.add(pointLight, 'intensity', 0, 10.0).name('点光源强度');
gui.add(directionalLight, 'intensity', 0, 50.0).name('平行光强度');

步长.step()方法

可以设置交互界面每次改变属性值间隔是多少。

gui.add(mesh.position, 'x', 0, 100).name('X轴').step(1.0);
gui.add(mesh.position, 'y', 0, 100).name('Y轴').step(1.0);
gui.add(mesh.position, 'z', 0, 100).name('Z轴').step(1.0);

.addColor()颜色值改变

生成几何体颜色值改变的交互界面。

const obj = {
    color:0xff0000,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
    mesh.material.color.set(value);
});

.add()方法进阶

之前我们所提到的.add()方法，后面的参数不仅仅可以是数字，还可以是数组，布尔值甚至是对象。

• 数组：

const obj = {
    scale: 0,
};
// 参数3数据类型：数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
});

• 布尔值

const obj = {
    bool: false,
};
gui.add(obj, 'bool').name('旋转动画');

// 渲染循环
function render() {
    // 当gui界面设置obj.bool为true,mesh执行旋转动画
    if (obj.bool) mesh.rotateY(0.01);
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

• 对象

const obj = {
    scale: 0,
};
// 参数3数据类型：对象(下拉菜单)
gui.add(obj, 'scale', {
    left: -100,
    center: 0,
    right: 100
    // 左: -100,//可以用中文
    // 中: 0,
    // 右: 100
}).name('位置选择').onChange(function (value) {
    mesh.position.x = value;
});

界面分组

当GUI交互界面需要控制的属性比较多的时候，为了避免混合，可以适当分组管理，这样更清晰。

通过gui对象的.addFolder()方法可以创建一个子菜单，当你通过GUI控制的属性比较多的时候，可以使用.addFolder()进行分组。

const pos = gui.addFolder("位置");
pos.add(mesh.position, 'x', 0, 100).name('X轴').step(1.0);
pos.add(mesh.position, 'y', 0, 100).name('Y轴').step(1.0);
pos.add(mesh.position, 'z', 0, 100).name('Z轴').step(1.0);

const lightFolder = gui.addFolder('光源');
lightFolder.add(ambient, 'intensity', 0, 100.0).name('环境光强度').step(1.0);
lightFolder.add(pointLight, 'intensity', 0, 10.0).name('点光源强度').step(1.0);
lightFolder.add(directionalLight, 'intensity', 0, 50.0).name('平行光强度').step(1.0);

子菜单都可以用代码控制交互界面关闭或开展状态。

gui.close();//关闭菜单
gui.open(); //打开菜单