Three.js入门②

侯咕咕

已于 2023-05-18 23:18:14 修改

阅读量366

点赞数

文章标签： javascript 前端开发语言笔记

于 2023-05-08 19:59:12 首次发布

本文链接：https://blog.csdn.net/weixin_43900698/article/details/130559565

版权

文章介绍了Three.js中的光源类型，包括点光源、自然光源和平行光源，以及如何使用PointLightHelper和DirectionalLightHelper进行可视化。此外，还讲解了OrbitControls相机控件的使用，和通过requestAnimationFrame实现的动画渲染循环。

摘要由CSDN通过智能技术生成

最近学习Three.js，此贴供学习记录之用。
学习视频：Three.js教程。讲解很详细，也有配套的笔记，但不包含前端基础知识的讲解，如果是纯小白的朋友，可以找这位up之前的教程学习一下。

先写一个简单的html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Three.js入门②</title>
    </head>

    <body>
    	<!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
        <script type="importmap">
            {
                "imports": {
                    "three": "./three.js/build/three.module.js",
                }
            }
        </script>
        
        <!-- 引入.js文件 -->
        <script src="./0508_1.js" type="module"></script>
    </body>
</html>

再写根据入门①一个.js文件，然后就让我们开始

// 引入
import * as THREE from 'three';

// scene
const scene = new THREE.Scene();

// axes
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

// mesh
const geometry = new THREE.BoxGeometry(50, 50, 50);
// 这次要换用另一材质的mesh所以后面先不写

const width = 800;
const height = 500;
// camera
const camera = new THREE.PrespectiveCamera(30, width/height, 0.1, 3000);
camera.position.set(200, 200, 200);
camera.lookAt(0);

//renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);

document.body.appendChild(renderer.domElement);

一、光源对物体表面的影响

物体材质

物体材质分为受光照影响材质和不受光照影响材质两种，其中不受光照影响的就是在上一篇笔记中用到过的基础网格材质MeshBasicMaterial，其余材质均受光照影响。

创建材质对象，这里使用漫反射材质做例子

// 设置受光照影响材质
const material = new THREE.MeshLambertMeterial({	// 漫反射材质
	color: 0x00ffff;
)};

创建网格模型

const mesh = new THREE.Mesh(geometry, material);

⚠️这里不需要设置物体位置，默认在原点处
我不明白为什么，设置了之后物体会显示不出来

// mesh.position.set(0, 0, 0);

添加物体到场景中

scene.add(mesh);

光源种类

1、点光源

创建点光源对象

点光源参数：
color: 光源颜色，缺省值白色
intensity: 光照强度，缺省值1
distance: 光照远度，表示从光源到光照强度为0的位置，缺省值0，表示光永远不会消失（距离无穷大）
decay: 沿着光照距离的衰退量，缺省值 2。

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1.0);

设置点光源位置

// 点光源位置
pointLight.position.set(400, 400, 400);

将点光源加入场景

// 将点光源加入场景
scene.add(pointLight);

效果

点光源辅助观察控件PointLightHelper

通过PointLightHelper控件可视化点光源。

参数：
pointLight: 光源对象
phereSize: 球形辅助对象尺寸缺省值为1
color: 颜色缺省值为光源颜色

// 点光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

2、自然光源

没有特定方向，整体改变光线明暗

参数：
color: 光源颜色缺省值白色
intensity: 光照强度缺省值1

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

效果

3、平行光源

沿特定方向发射

参数：
color: 光源颜色缺省值白色
intensity: 光照强度缺省值1

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 100, 100);
// 平行光指向网格对象mesh，若不设置则默认指向原点
directionalLight.target = mesh;
scene.add(directionalLight);

平行光辅助观察控件DirectionalLight

可视化平行光

参数
light: 被模拟光源
size: 平面尺寸缺省为1
color: 颜色缺省为光源颜色

const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);
scene.add(dirLightHelper);

效果

二、相机控件OrbitControls

OrbitControls本质上就是改变相机的参数，比如相机的位置属性和透视投影相机距离模型的距离，可实现旋转缩放的预览效果。

控件引入

.html文件中importmaps部分添加

"three/addons/": "./three.js/examples/jsm/"

.js文件部分添加

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

OrbitControls使用

// 创建相机控件轨道控制器对象
const controls = new OrbitControls(camera, renderer.domElement);
// 设置事件
controls.addEventListener('change', function(){	// 监听鼠标键盘事件
	// 渲染
	renderer.render(scene, camera);
	// 在控制台查看相机位置变化
	console.log('camera.position', camera.position);
});

三、动画渲染循环

请求动画帧window.requestAnimationFrame实现动画渲染

requestAnimationFrame实现周期性循环执行默认每秒钟执行60次，但不一定能做到，要看代码的性能

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

效果
利用连续渲染实现旋转动画

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

效果

旋转动画

计算渲染两帧的时间间隔和帧率

// Clock()用于跟踪时间
/* 
    参数：
        autoStart: 是否要在第一次调用 .getDelta() 时自动开启时钟 缺省为true
 */
const clock = new THREE.Clock();
function render() {
    /* getDelta()获取自 .oldTime 设置后到当前的秒数。 同时将 .oldTime 设置为当前时间。
       如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。 */
    const spt = clock.getDelta() * 1000;    // 计算结果为毫秒
    console.log('两帧渲染时间间隔(毫秒)：', spt);
    console.log('帧率FPS：', 1000 / spt);
    renderer.render(scene, camera);
    mesh.rotateZ(0.01);
    requestAnimationFrame(render);
}
render();

效果

时间间隔和帧率

完整.js文件

// 引入three.js
import * as THREE from 'three';

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

const geometry = new THREE.BoxGeometry(50, 50, 50);
// 设置受光照影响材质
const material = new THREE.MeshLambertMaterial({   // 漫反射材质
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry, material);
// mesh.position.set(0, 0, 0);
scene.add(mesh);

// 设置光源
const pointLight = new THREE.PointLight(0xffffff, 1.0);
// 光源位置
pointLight.position.set(400, 400, 400);
// 加入场景
scene.add(pointLight);

// 点光源辅助观察
/* 
    参数：
        pointLight: 光源对象
        phereSize: 球形辅助对象尺寸 缺省值为1
        color: 颜色 缺省值为光源颜色
 */
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

// 环境光 没有特定方向，整体改变光线明暗
/* 
    参数：
        color: 光源颜色 缺省值白色
        intensity: 光照强度 缺省值1
 */
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// 平行光 沿特定方向发射
/* 
    参数：
        color: 光源颜色 缺省值白色
        intensity: 光照强度 缺省值1
 */
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 100, 100);
// 平行光指向网格对象mesh，若不设置则默认指向原点
directionalLight.target = mesh;
scene.add(directionalLight);
// 平行光辅助观察DirectionalLight 可视化平行光
/* 
    参数：
        light: 被模拟光源
        size: 平面尺寸 缺省为1
        color: 颜色 缺省为光源颜色
 */
const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);
scene.add(dirLightHelper);

const width = 800;
const height = 500;
const camera = new THREE.PerspectiveCamera(30, width/height, 0.1, 3000);
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);

document.body.appendChild(renderer.domElement);

/* 
    OrbitsControls本质上是改变相机的参数
 */
// 相机控件轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function(){ // 监听鼠标、键盘事件
    // 通过控制台查看相机位置变化
    console.log('camera.position: ', camera.position);
    renderer.render(scene, camera); // 渲染
})

// 动画渲染循环
// 请求动画帧window.requestAnimationFrame实现动画渲染
/* 
    requestAnimationFrame实现周期性循环执行 默认每秒钟执行60次，但不一定能做到，要看代码的性能
 */
let i = 0;
function render() {
    i += 1;
    console.log('执行次数：', i);
    requestAnimationFrame(render);  // 请求再次执行函数render()
}
// render();

// 旋转动画 利用连续渲染实现
function render() {
    // 执行渲染
    renderer.render(scene, camera);
    // 每次绕Z轴旋转0.01弧度
    mesh.rotateZ(0.01);
    // 请求再次执行渲染函数render，渲染下一帧
    requestAnimationFrame(render);
}
// render();

// 计算渲染两帧的时间间隔和帧率
// Clock()用于跟踪时间
/* 
    参数：
        autoStart: 是否要在第一次调用 .getDelta() 时自动开启时钟 缺省为true
 */
const clock = new THREE.Clock();
function render() {
    /* getDelta()获取自 .oldTime 设置后到当前的秒数。 同时将 .oldTime 设置为当前时间。
       如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。 */
    const spt = clock.getDelta() * 1000;    // 计算结果为毫秒
    console.log('两帧渲染时间间隔(毫秒)：', spt);
    console.log('帧率FPS：', 1000 / spt);
    renderer.render(scene, camera);
    mesh.rotateZ(0.01);
    requestAnimationFrame(render);
}
render();