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

day01作业打卡

WebGL简介

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScriptOpenGL 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的方案

  1. ActiveX插件: IE、Chrome老版本、Firefox老版本,已过时;
  2. Flash: 时代王者,官方已停止维护;
  3. WebGL: 浏览器原生支持(IE11基本支持,其它浏览器基本都支持)
  4. WebGPU: 性能高,目前还未得到操作系统和浏览器的广泛支持;

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

元宇宙基础-Three.js | 大帅老猿threejs特训营_第1张图片

Three.js基础

官网以及下载

Three.js的官网
Three.js下载地址:github下载, 国内码云

什么是3D模型,模型由什么构成?什么是贴图?

3D模型为三维立体展示的模型,模型由网格、材质、贴图等部分组成,贴图的作用是描述物体表面的材质。
元宇宙基础-Three.js | 大帅老猿threejs特训营_第2张图片

空间坐标系

元宇宙基础-Three.js | 大帅老猿threejs特训营_第3张图片

相机类型

元宇宙基础-Three.js | 大帅老猿threejs特训营_第4张图片

基础场景三大件

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

灯光

元宇宙基础-Three.js | 大帅老猿threejs特训营_第5张图片

材质

元宇宙基础-Three.js | 大帅老猿threejs特训营_第6张图片

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官方下载
元宇宙基础-Three.js | 大帅老猿threejs特训营_第7张图片

将下载好的安装包blender-3.4.0-windows-x64.msi直接运行
元宇宙基础-Three.js | 大帅老猿threejs特训营_第8张图片

软件默认是英文的,在欢迎页面可以选择中文和英文,也可以在进入软件后,依次点击Edit-Preference,进入设置界面选择各自的语言。
元宇宙基础-Three.js | 大帅老猿threejs特训营_第9张图片

Blender视图基本操作

元宇宙基础-Three.js | 大帅老猿threejs特训营_第10张图片

获取模型资源

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();

代码运行大功告成!
元宇宙基础-Three.js | 大帅老猿threejs特训营_第11张图片

day02作业打卡

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

blender建立展馆模型

元宇宙基础-Three.js | 大帅老猿threejs特训营_第12张图片

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);

你可能感兴趣的:(javascript,开发语言,ecmascript)