一、如何学习WEB可视化3D技术与课程内容演示;
1、项目案例:
政府有大量的新基建的项目:如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等都涉及了3d的可视化技术;
2、如何系统的学号WEB 3D可视化技术?
three.js是一个让用户通过javascript入手进入搭建webgl项目的类库;
学习webgl需要图形学的知识,而webgl需要通过学习 js 和 glsl 两种语言;
直接使用webgl需要的话,那么势必是从底层写起来,那这个时候必须全面的去了解 着色器 的语法,那么自己需要去编写 顶点着色器 和 片元着色器;
3、如何开始学习three.js?
需要掌握:threejs里面的基本概念:点、线、面、几何体;
需要掌握:材质物体、场景、相机、渲染器、动画、控制器;
需要了解:pbr(pbr是基于物理的光照原理的渲染)、环境贴图、凹凸贴图、置换贴图、放射光、环境贴图、金属贴图、粗糙度贴图;
如何通过这些方式把光照的效果:类如石子的凹凸、门面的凹凸、仅仅通过一个平面也能够显示出凹凸不平的效果 以及 折射不同角度的光照效果;
如何打造粒子?我们要绘制雨雪、落叶、星河;
如何让我们的网页 跟我们的物体进行一个互动?如何选中场景中的物体进行交互?如何能够掌握物理引擎让物体有真实的物理效果?例如像:重力、反弹、摩擦力等物体这个相互作用,让它更加的真实?
4、如何系统学习WEBGL?
进入webgl的魔力世界:掌握着色技术的语言控制,用gpu的方式来进行渲染;掌握threejs怎么用底层去封装webgl;
如何通过着色器编写顶点着色器?如何通过着色器编写片元着色器?
了解整个图像渲染的原理,去绘制比如 动态飘扬的旗帜、衣服、烟雾、乌云、波涛汹涌的大海、水纹等...
掌握了着色器,我们就可以写出各种酷炫的效果:像节日的烟花。
继续深入可以让整个场景进行后期的加工,例如说:可以打造出像生化危机里面闪烁的怪异的画面、一个带雪花的陈旧感的画面、编写着色器打造出水底观看的效果;
二、新增打造开放世界课程项目预览;
三、本地搭建three.js的官方网站;
1、Github下载three.js的代码;
官网:github.com:mrdoob/three.js.git
下载压缩包文件:Download ZIP
解压文件后:npm install
启动项目:npm run dev
四、使用parcel搭建three.js的开发环境;
1、为什么使用parcel?
代码自动补全;
写完代码在浏览器中可以直接看到效果;
极速配置、快速上手开发;
2、如何搭建parcel的开发环境?
网址:parceljs.cn
// 01.项目初始化
npm init// 02.安装bunder
npm install parcel-bundler// 03.配置命令
{"scripts" : {// 打包哪个文件"dev" : "parcel src/index.html",// 项目构建"build" : "parcel build src/index.html"}
}// 04.设置开发环境的依赖
npm install parcel-bundler --save-dev
3、安装Three.js的依赖
// 安装threejs的环境包依赖
npm install three --save
五、使用three.js渲染第一个场景和物体;
import * as THREE from 'three';console.log(THREE)// 目标:了解three.js最基本的内容// 一、创建场景
const scene = new THREE.Scene();// 二、创建相机(透视相机)
/*** fov 摄像机是椎体垂直视野角度* aspect 摄像机视椎体宽高比* near 摄像机视椎体近端面* far 摄像机视椎体远端面*/
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000
);// 2.1.设置相机位置
camera.position.set(0,0,10);// 2.2.场景中添加相机
scene.add(camera);// 三、场景中添加物体
// 3.1.创建几何体对象
const cubeGeometry = new THREE.BoxGeometry(1,1,1);// 3.2.设置几何体的材质
const cubeMaterial = new THREE.MeshBasicMaterial({color : 0xffff000})// 3.3.根据几何体的材质创建物体
const cube = new THREE.Mesh(cubeGeometry , cubeMaterial);// 3.4.将几何体添加到场景当中
scene.add(cube);// 四、初始化渲染器
// 4.1.初始化渲染器
const renderer = new THREE.WebGLRenderer();// 4.2.设置渲染的尺寸和大小,和屏幕的尺寸大小一致
renderer.setSize(window.innerWidth, window.innerHeight);console.log(renderer);// 五、将webgl渲染的canvas内容添加至body
document.body.appendChild(renderer.domElement);// 六、使用渲染器通过相机将场景渲染进来
renderer.render(scene,camera);
六、如何处理运行搭建开发Three环境出现的问题;
七、结合vue开发three.js;
1、用vue搭建THREE的开发环境;
// 01.全局安装VUE-CLI环境
npm install -g @vue/cli// 02.创建vue项目,选择vue3版本
vue create threeapp? Your connection to the default yarn registry seems to be slow.Use https://registry.npmmirror.com for faster installation? YesVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn// 03.安装THREE的依赖
cd /threeapp
yarn add three// 04.启动环境
yarn serve
2、修改App.vue的文件;
<template><div></div>
</template><script setup>import * as THREE from 'three';console.log(THREE)// 目标:了解three.js最基本的内容// 一、创建场景const scene = new THREE.Scene();// 二、创建相机(透视相机)/*** fov 摄像机是椎体垂直视野角度* aspect 摄像机视椎体宽高比* near 摄像机视椎体近端面* far 摄像机视椎体远端面*/const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);// 2.1.设置相机位置camera.position.set(0,0,10);// 2.2.场景中添加相机scene.add(camera);// 三、场景中添加物体// 3.1.创建几何体对象const cubeGeometry = new THREE.BoxGeometry(1,1,1);// 3.2.设置几何体的材质const cubeMaterial = new THREE.MeshBasicMaterial({color : 0xffff000})// 3.3.根据几何体的材质创建物体const cube = new THREE.Mesh(cubeGeometry , cubeMaterial);// 3.4.将几何体添加到场景当中scene.add(cube);// 四、初始化渲染器// 4.1.初始化渲染器const renderer = new THREE.WebGLRenderer();// 4.2.设置渲染的尺寸和大小,和屏幕的尺寸大小一致renderer.setSize(window.innerWidth, window.innerHeight);console.log(renderer);// 五、将webgl渲染的canvas内容添加至bodydocument.body.appendChild(renderer.domElement);// 六、使用渲染器通过相机将场景渲染进来renderer.render(scene,camera);</script><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
canvas {width: 100vw;height: 100vh;postion: fixed;left:0;top:0;
}</style>
注:本文为THREEJS的学习笔记,不涉及商业盈利,如原作者认为有涉及原课程的侵权行为,请联系我删文处理!!!