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视图基本操作
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.position.set(5, 10, 25);
const controls = new OrbitControls(camera, renderer.domElement);
scene.background = new THREE.Color(0.2, 0.2, 0.2);
const directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
scene.add(directionLight);
new GLTFLoader().load('../resources/models/test.glb', (gltf) => {
// console.log(gltf);
scene.add(gltf.scene);
gltf.scene.traverse((child)=>{
// console.log(child.name);
if (child.name === '2023' || child.name === '眼称') {
const video = document.createElement('video');
video.src = "./resources/yanhua.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '大屏幕01') {
const video = document.createElement('video');
video.src = "./resources/video01.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '大屏幕02' || child.name === '操作台屏幕') {
const video = document.createElement('video');
video.src = "./resources/video01.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '环形屏幕') {
const video = document.createElement('video');
video.src = "./resources/video02.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '柱子屏幕') {
const video = document.createElement('video');
video.src = "./resources/yanhua.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
})
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();代码编写运行大功告成！
day03作业打卡
用Three.js实现控制角色在展厅中自由游览
blender人物动作的制作
人物行走、站立动作如何合并？
在blender中，layout窗口，选择非线性动画，引入两个动作。动作编辑完毕，选择物体进行烘焙动作，选择姿态并确认，生成Acion，人物动作制作完成。
threejs阴影设置
阴影四步走：
- 打开renderer阴影
- 打开灯光阴影；设置灯光阴影大小
- 设置灯光阴影体相机远近大小
- 设置mesh投射、接收阴影
// 1 打开renderer阴影
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
// 2.1 打开灯光阴影
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 1, 0 );
light.castShadow = true; // 默认值false
scene.add( light );
// 2.2 设置灯光阴影贴图大小
light.shadow.mapSize.width = 512; //默认值
light.shadow.mapSize.height = 512; //默认值
// 3 设置阴影体 远近 大小，不在这之内的显示不出来
light.shadow.camera.near = 0.5; //默认值
light.shadow.camera.far = 500; //默认值
light.shadow.camera.left = -shadowDistance;
light.shadow.camera.right = shadowDistance;
light.shadow.camera.top = shadowDistance;
light.shadow.camera.bottom = -shadowDistance;
// 4 设置Mesh 投射阴影 接收阴影
gltf.scene.traverse((child) => {
child.castShadow = true;
child.receiveShadow = true;
})
// 阴影调试辅助工具
const helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
角色人物控制
- 简易角色控制相机：
playerMesh.add(camera);
camera.position.y = 2;
camera.position.z = -3;
camera.lookAt(playerMesh.position);
- 动作面片剪辑工具：
const clipIdle = THREE.AnimationUtils.subclip(gltf.animations[0], 'idle', 31, 281);
actionIdle = playerMixer.clipAction(clipIdle);
actionIdle.play();- 渐变切换动画工具函数：
function crossPlay(curAction, newAction) {
curAction.fadeOut(0.3);
newAction.reset();
newAction.setEffectiveWeight(1);
newAction.play();
newAction.fadeIn(0.3);
}
角色人物碰撞
// THREE.Raycaster实现角色碰撞检测:
const curPos = playerMesh.position.clone();
playerMesh.translateZ(1);
const frontPos = playerMesh.position.clone();
playerMesh.translateZ(-1);
const frontVector3 = frontPos.sub(curPos).normalize();
const raycasterFront = new THREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight), frontVector3);
const collisionResultsFrontObjs = raycasterFront.intersectObjects(scene.children);
console.log(collisionResultsFrontObjs);
if (collisionResultsFrontObjs && collisionResultsFrontObjs[0].distance > 1) {
playerMesh.translateZ(3 * deltaTime);
}
// 优化角色移动流畅度
let deltaTime;
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
deltaTime = clock.getDelta();
};
Three.js实现控制角色在展厅中自由游览代码编写并运行
import * as THREE from 'three';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
let mixer;
let playerMixer;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 50);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.background = new THREE.Color(0.2, 0.2, 0.2);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);
const directionLight = new THREE.DirectionalLight(0xffffff, 0.2);
scene.add(directionLight);
directionLight.lookAt(new THREE.Vector3(0, 0, 0));
directionLight.castShadow = true;
directionLight.shadow.mapSize.width = 2048;
directionLight.shadow.mapSize.height = 2048;
const shadowDistance = 20;
directionLight.shadow.camera.near = 0.1;
directionLight.shadow.camera.far = 40;
directionLight.shadow.camera.left = -shadowDistance;
directionLight.shadow.camera.right = shadowDistance;
directionLight.shadow.camera.top = shadowDistance;
directionLight.shadow.camera.bottom = -shadowDistance;
directionLight.shadow.bias = -0.001;
let playerMesh;
let actionWalk, actionIdle;
const lookTarget = new THREE.Vector3(0, 2, 0);
new GLTFLoader().load('../resources/models/player2.glb', (gltf) => {
playerMesh = gltf.scene;
scene.add(gltf.scene);
playerMesh.traverse((child)=>{
child.receiveShadow = true;
child.castShadow = true;
})
playerMesh.position.set(13, 0, 0);
playerMesh.rotateY(-Math.PI/2);
playerMesh.add(camera);
camera.position.set(0, 2, -5);
camera.lookAt(lookTarget);
const pointLight = new THREE.PointLight(0xffffff, 0.1);
playerMesh.add(pointLight);
pointLight.position.set(0, 1.8, -1);
playerMixer = new THREE.AnimationMixer(gltf.scene);
const clipWalk = THREE.AnimationUtils.subclip(gltf.animations[0], 'walk', 0, 29);
actionWalk = playerMixer.clipAction(clipWalk);
// actionWalk.play();
const clipIdle = THREE.AnimationUtils.subclip(gltf.animations[0], 'idle', 30, 281);
actionIdle = playerMixer.clipAction(clipIdle);
actionIdle.play();
});
let isWalk = false;
const playerHalfHeight = new THREE.Vector3(0, 0.8, 0);
window.addEventListener('keydown', (e) => {
if (e.key === 'w') {
const curPos = playerMesh.position.clone();
playerMesh.translateZ(1);
const frontPos = playerMesh.position.clone();
playerMesh.translateZ(-1);
const frontVector3 = frontPos.sub(curPos).normalize()
const raycasterFront = new THREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight), frontVector3);
const collisionResultsFrontObjs = raycasterFront.intersectObjects(scene.children);
console.log(collisionResultsFrontObjs);
if (collisionResultsFrontObjs && collisionResultsFrontObjs[0] && collisionResultsFrontObjs[0].distance > 1) {
playerMesh.translateZ(0.1);
}
if (!isWalk) {
crossPlay(actionIdle, actionWalk);
isWalk = true;
}
}
if (e.key === 's') {
playerMesh.translateZ(-0.1);
}
})
window.addEventListener('keyup', (e) => {
if (e.key === 'w') {
crossPlay(actionWalk, actionIdle);
isWalk = false;
}
});
let preClientX;
window.addEventListener('mousemove', (e) => {
if (preClientX && playerMesh) {
playerMesh.rotateY(-(e.clientX - preClientX) * 0.01);
}
preClientX = e.clientX;
});
let happayNewYear2023;
new GLTFLoader().load('../resources/models/test.glb', (gltf) => {
// console.log(gltf);
scene.add(gltf.scene);
gltf.scene.traverse((child)=>{
child.castShadow = true;
child.receiveShadow = true;
if (child.name === '2023' || child.name === '眼称') {
const video = document.createElement('video');
video.src = "./resources/yanhua.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '大屏幕01') {
const video = document.createElement('video');
video.src = "./resources/video01.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '大屏幕02' || child.name === '操作台屏幕') {
const video = document.createElement('video');
video.src = "./resources/video01.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '环形屏幕') {
const video = document.createElement('video');
video.src = "./resources/video02.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
if (child.name === '柱子屏幕') {
const video = document.createElement('video');
video.src = "./resources/yanhua.mp4";
video.muted = true;
video.autoplay = "autoplay";
video.loop = true;
video.play();
const videoTexture = new THREE.VideoTexture(video);
const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
child.material = videoMaterial;
}
})
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 crossPlay(curAction, newAction) {
curAction.fadeOut(0.3);
newAction.reset();
newAction.setEffectiveWeight(1);
newAction.play();
newAction.fadeIn(0.3);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
// controls.update();
if (mixer) {
mixer.update(0.02);
}
if (playerMixer) {
playerMixer.update(0.015);
}
}
animate();代码编写运行大功告成！