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