元宇宙基础-Three.js | 大帅老猿threejs特训营

qq_37787249

已于 2022-12-24 20:15:02 修改

阅读量551

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-12-17 11:38:59 首次发布

本文链接：https://blog.csdn.net/qq_37787249/article/details/128351946

版权

这篇博客介绍了WebGL的基础和Three.js在Web3D开发中的作用，详细讲解了Three.js的基本概念，包括模型、贴图、坐标系和相机类型。还探讨了Blender在3D建模中的应用，以及如何将Blender模型导入Three.js进行展示和交互。通过一系列的作业打卡，逐步展示了如何创建和控制3D角色在展厅中自由游览的场景，涵盖了灯光、阴影、人物动作和碰撞的设置。

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

day01作业打卡

WebGL简介

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

WebGL使用需要图形学知识，对WebGL编程可以通过js和glsl两种语言。如果想直接使用WebGL，使用者可以采用着色器（Shader）用来实现图像渲染的，但对于新手来说，Shader还是困难的。这时我们可以使用Three.js来简化我们对底层图形学的开发知识，更快的上手3D开发过程。

与2D技术相比，Web3D技术运用，可以通过三维呈现，可以更立体，交互更好的展示企业信息，现在的很多智慧项目，如数字孪生，智慧城市都使用到了3D可视化技术。

Web3D的主要展示方式：

第一种：浏览器直接渲染：电脑浏览器、移动端浏览器（包括微信浏览器）微信小程序；
第二种：服务端渲染（服务端运行，效果好，运营成本高）；将3D画面像素推流到前端浏览器/小程序展示；

3D近几年流行的相关概念：

数字孪生：三维实景模型 + 多系统监控/告警数据，实现远程监管（监控、管理）;
VR：把人装进虚拟环境
AR：把虚拟装进现实

浏览器运行3D的方案

ActiveX插件： IE、Chrome老版本、Firefox老版本，已过时；
Flash：时代王者，官方已停止维护；
WebGL：浏览器原生支持（IE11基本支持，其它浏览器基本都支持）
WebGPU: 性能高，目前还未得到操作系统和浏览器的广泛支持；

可实现发布WebGL到浏览器的运行方案(从重到轻)：

Three.js基础

官网以及下载

Three.js的官网
Three.js下载地址：github下载，国内码云

什么是3D模型，模型由什么构成？什么是贴图？

3D模型为三维立体展示的模型，模型由网格、材质、贴图等部分组成，贴图的作用是描述物体表面的材质。

空间坐标系

相机类型

基础场景三大件

scene 场景 new THREE.Scene();
camera 相机 new THREE.PerspectiveCamera(75.windw)
renderer 渲染器 new THREE.WebGLRenderer();

灯光

材质

Blender美术协作基础

Blender简介

Blender是一款免费开源三维图形图像软件，提供从建模、动画、材质、渲染、到音频处理、视频剪辑等一系列动画短片制作解决方案。
Blender拥有方便在不同工作下使用的多种用户界面，内置绿屏抠像、摄像机反向跟踪、遮罩处理、后期结点合成等高级影视解决方案。Blender内置有Cycles渲染器与实时渲染引擎EEVEE 。同时还支持多种第三方渲染器。
Blender为全世界的媒体工作者和艺术家而设计，可以被用来进行三维可视化，同时也可以创作广播和电影级品质的视频，另外内置的实时三维游戏引擎，让制作独立回放的三维互动内容成为可能（游戏引擎在2.8版本被移除）。

Blender功能

完整集成的创作套件，提供了全面的 3D 创作工具，包括：

建模（Modeling）、UV 映射（uv-Mapping）、贴图（Texturing）、绑定（Rigging）、蒙皮（Skinning）、动画（Animation）、粒子（Particle）和其它系统的物理学模拟（Physics）、脚本控制（Scripting）、渲染（Rendering）、运动跟踪（Motion Tracking）、合成（Compositing）、后期处理（Post-production）和游戏制作（已移除 [1] ）；

跨平台支持:

它基于 OpenGL 的图形界面在任何平台上都是一样的（而且可以通过 Python 脚本自定义），可以工作在所有主流的 Windows（10、8、7、Vista）、Linux、OS X 等众多其它操作系统上；

Blender下载与安装

Blender官方下载

将下载好的安装包blender-3.4.0-windows-x64.msi直接运行

软件默认是英文的，在欢迎页面可以选择中文和英文，也可以在进入软件后，依次点击Edit-Preference，进入设置界面选择各自的语言。

Blender视图基本操作

获取模型资源

www.sketchfab.com

Three.js掉落的甜甜圈案例编写代码并运行

import * as THREE from 'three';
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
    GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {
    RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';

let mixer;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10);
const renderer = new THREE.WebGLRenderer({
    antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(0.3, 0.3, 0.5);

const controls = new OrbitControls(camera, renderer.domElement);

// scene.background = new THREE.Color(0.6, 0.6, 0.6);

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

const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
scene.add(directionLight);

// const boxGeometry = new THREE.BoxGeometry(1,1,1);
// const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
// const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
// scene.add(boxMesh);

let donuts;
new GLTFLoader().load('../resources/models/donuts.glb', (gltf) => {
   

    console.log(gltf);
    scene.add(gltf.scene);
    donuts = gltf.scene;

    // gltf.scene.traverse((child)=>{
   
    //     console.log(child.name);
    // })

    mixer = new THREE.AnimationMixer(gltf.scene);
    const clips = gltf.animations; // 播放所有动画
    clips.forEach(function (clip) {
   
        const action = mixer.clipAction(clip);
        action.loop = THREE.LoopOnce;
        // 停在最后一帧
        action.clampWhenFinished = true;
        action.play();
    });

})

new RGBELoader()
    .load('../resources/sky.hdr', function (texture) {
   
        scene.background = texture;
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.render(scene, camera);
});

function animate() {
   
    requestAnimationFrame(animate);

    renderer.render(scene, camera);

    controls.update();

    if (donuts){
   
        donuts.rotation.y += 0.01;
    }

    if (mixer) {
   
        mixer.update(0.02);
    }
}

animate();

代码运行大功告成！

day02作业打卡

用blender建立自己的展馆模型
blender用到的知识点有：面、边、顶点、添加字体、uv展开，旋转、移动、缩放等操作。
其中uv展开非常重要，是为了使物体更好展示部分贴图的展现，包括块面投影、柱面投影、球面投影。

blender建立展馆模型

three.js展示展馆模型编写代码并运行

import * as THREE from 'three';
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
    GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {
    RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';

let mixer;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
const renderer = new THREE.WebGLRenderer({
    antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera<