元宇宙基础案例 | 大帅老猿threejs特训

用户2225445

发布于 2023-10-16 15:46:31

4230

发布于 2023-10-16 15:46:31

文章被收录于专栏：IT从业者张某某

day01作业打卡

自学的作品：

day01学完之的作品：

元宇宙基础-Three.js day01学成回来| 大帅老猿threejs特训营

day02作业打卡

~~持续更新~~

day03作业打卡

~~持续更新~~

什么是元宇宙

「元宇宙」这个概念在近来十分火热，但本质来上说，元宇宙这个词更多的是一个商业上的概念，在这个概念里面融入集成了很多现有的技术。具体可能包括：

包括信息革命（5G/6G)、互联网革命（web3.0）、人工智能革命，以及 VR、AR、MR，特别是游戏引擎在内的虚拟现实技术革命的成果，向人类展现出构建与传统物理世界平行的全息数字世界的可能性；引发了信息科学、量子科学，数学和生命科学的互动，改变科学范式；推动了传统的哲学、社会学甚至人文科学体系的突破；囊括了所有的数字技术，包括区块链技术成就；丰富了数字经济转型模式，融合 DeFi、IPFS、NFT 等数字金融成果。 ------数字资产研究院学术与技术委员会主任朱嘉明教授来源知乎

Three.js基础入门-自学篇

Web3D技术

随着浏览器性能和网络带宽的大幅度提升，以及WebGL的实现，使得Web应用中也可以使用3D技术。

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

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开发过程。

Three.js自学篇

官网以及下载

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

下载后，解压

备注，你可以根据下载后的文件，搭建一个本地的thee.js官网。进入解压后的three.js-dev目录，执行npm install

E:\vscode\Three三维可视化\three.js-dev\three.js-dev>npm install

然后执行 npm start

输入： http://localhost:8080 可查看本地官网

备注可能遇到但不希望你遇到的问题

node卸载 nodejs升级链接 npm升级方法：

npm版本太高，无法再当前nodejs里运行时，如何卸载npm

npm install -g npm
或
cnpm install -g npm

Three.js引入

新建文件夹前端demo ，如下：

在该项目下执行，打开cmd，执行 npm install three 在前端demo目录下，生成node_modules目录

安装three完成

Three.js入门案例

参考博客Three.js入门教程——教不会算我输

编码

在前端demo的文件夹下创建src目录，在src目录下创建a.html内容如下

代码：

<!DOCTYPE html>
<html>
<head>
	<title>Wonanut 3D</title>
	<style type="text/css">
		body { margin: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
</head>
<body>
	<script type="text/javascript" src="../node_modules/three/build/three.js"></script>
	<script type="text/javascript">
		//场景-----------------------
		var scene = new THREE.Scene();
		//--------------------------
 
		//摄像机---------------------
		var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.x = -30;
		camera.position.y = 40;
		camera.position.z = 30
		camera.lookAt(scene.position);
		//--------------------------
		
		//渲染器--------------------
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
		
		// 设置渲染器渲染阴影效果
		renderer.setClearColor(new THREE.Color(0x000000));
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.shadowMap.enabled = true;
		//渲染器 end----------------
 
		//坐标轴--------------------
		var axes = new THREE.AxesHelper(20);
		scene.add(axes);
		//-------------------------
 
		//平面---------------------
		var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
		var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
		var plane = new THREE.Mesh(planeGeometry, planeMaterial);
		plane.rotation.x = -0.5 * Math.PI;
		plane.position.x = 15
		plane.position.y = 0
		plane.position.z = 0
		scene.add(plane);
 
		// 设置投影
		plane.receiveShadow = true;
		//--------------------------
		
		//物体----------------------
		var geometry = new THREE.BoxGeometry(4, 4, 4);
		var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
		var cube = new THREE.Mesh( geometry, material );
		cube.position.x = 0;
		cube.position.y = 2;
		cube.position.z = 0;
 
		// 设置投影
		cube.castShadow = true;
		scene.add( cube );
		//物体 end ------------------
 
		//光源-----------------------
		var spotLight = new THREE.SpotLight( 0xffffff );
		spotLight.position.set( -40, 60, -10 );
		scene.add( spotLight );
 
		// 设置投影
		spotLight.castShadow = true;
		//光源 end -------------------

		
		renderer.render( scene, camera );
		
	</script>
</body>
</html>

运行

右键–open with live server

运行截图

Three.js跟学day01之后的效果

善于使用官网手册

代码部分

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Day01</title>
</head>
<style>
    body {
        margin: 0px;
        padding: 0px;
    }
</style>

<body>
    <script type="module" src="/src/day01_new.js"></script>
</body>

</html>

js代码

import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; //相机控件
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; //glTF 模型加载
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);
// 把渲染器添加到body标签中
document.body.appendChild(renderer.domElement);

// 设置相机的位置 如果不设置  会只出现托盘的底部
camera.position.set(0.3, 0.3, 0.5);
// 轨道控制器（OrbitControls）
// Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
// 要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在HTML中包含这个文件。
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;
// GLTF加载器（GLTFLoader）
// 用于载入glTF 2.0资源的加载器
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);
    // })

    // 动画混合器是用于场景中特定对象的动画的播放器。
    // 当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。
    // 返回值为AnimationActions 用来调度存储在AnimationClips中的动画。
    mixer = new THREE.AnimationMixer(gltf.scene);
    const clips = gltf.animations; // 播放所有动画
    clips.forEach(function (clip) {
        // .clipAction (clip : AnimationClip, optionalRoot : Object3D) : AnimationAction
        // 返回所传入的剪辑参数的AnimationAction, 根对象参数可选，默认值为混合器的默认根对象。
        // 第一个参数可以是动画剪辑(AnimationClip)对象或者动画剪辑的名称。
        // 先用AnimationMixer.clipAction实例化一个AnimationAction，因为这个方法提供了缓存以提高性能。
        const action = mixer.clipAction(clip);
        // 循环模式 THREE.LoopRepeat无限循环
        action.loop = THREE.LoopOnce;
        // 停在最后一帧
        action.clampWhenFinished = true;
        action.play();
    });

})

// 加载单张HDR纹理贴图
new RGBELoader()
    .load('../resources/sky.hdr', function (texture) {
        scene.background = texture;
        // EquirectangularReflectionMapping告诉呈现器一个环境映射是等矩形格式的。
        // 由于着色器只支持非PBR材质的立方体贴图格式和PBR材质的cubeUV格式，因此等矩形纹理必须在渲染时进行转换。这由渲染器自动完成。
        //查看代码，WebGLRenderer.initTexture()将等矩形纹理视为普通纹理，因此在实际渲染之前它们不会转换为不同的格式。
        //然而，在转换过程中，应该消除等边矩形纹理的初始上传。
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.environment = texture;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.render(scene, camera);
});

// 动画显示
function animate() {
    // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
    // 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
    requestAnimationFrame(animate);
    // 在动画中渲染场景和相机
    renderer.render(scene, camera);

    // 更新归到controls
    controls.update();

    // donuts是gltf.scene 
    if (donuts){
        donuts.rotation.y += 0.01;
    }
    // AnimationActions 用来调度存储在AnimationClips中的动画
    if (mixer) {
        mixer.update(0.02);
    }
}

// 调用函数
animate();

运行效果

Blender美术协作基础

Blender简介

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

Blender背景

1988年，彤·罗森达尔（Ton Roosendaal）与人合作创建了荷兰的动画工作室NeoGeo。Ton 在 NeoGeo 内部时主要负责艺术指导和软件开发工作。经过仔细考察，Ton认为当时他们公司内部使用的三维套件过于陈旧复杂，难于维护和升级。在 1995 年这一工作开始了，其目标正是众所周知的三维软件Blender。在NeoGeo不断优化和改进Blender的过程中，Ton想到Blender也可以成为NeoGeo之外艺术家们的创作工具。 在1998年，Ton决定成立一家NeoGeo的衍生公司，名为Not a Number（NaN），目的是进一步运营和发展Blender。NaN的核心目标是创建发行一款紧凑且跨平台的免费三维创作套件。随着Blender的流行以及商业版本的销售业绩不佳，投资人关闭了NaN的所有业务。尽管如此，用户社区的热情支持和已经购买了Blender Publisher的消费者们让Ton没有就此从Blender引退。在2002年3月Ton创办了非盈利组织——Blender基金会。 Blender 基金会的主要目标，是找到一条能让Blender作为基于社区的开源项目被继续开发和推广的途径。在2002年10月13日那个星期天，Blender在GNU通用公共许可证（GPL）下向世人发布。Blender的开发一直进行中，创始人Ton领导下遍布世界的勤奋志愿团队在那之后不断地推动着这一工作。

Blender功能

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

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

跨平台支持: