ThreeJs-01开发环境建立
写在前面，好久不见各位，之前一段时刻由于一些工作有点忙，但从未中止学习的脚步，也屯了许多笔记，会在未来的时刻渐渐发出来，从今日开端一同进入WebGis，threeJs现在大前端开展的一个方向开端学习，期望里边能够有协助到咱们的内容，有缺乏的当地还请纠正，一同学习前进！！！
1.了解Three.js
近年来web得到了快速的开展。跟着HTML5的遍及，网页的体现才干越来越强壮。网页上现已能够做出许多杂乱的动画，精巧的作用。还能经过WebGL在网页中制造高功能的3D图形。
跟着浏览器功能和网络带宽的大幅度提高，以及WebGL的完成，使得3D技能不再是桌面程序的专利，越来越多的Web运用运用3D技能。
对网站而言，Web3D技能运用，完成企业网站三维出现，让企业形象更直观、更立体地展现给客户，打破传统平面展现形式，打造才智、特性、立异的企业形象。现在政府有很多的新基建项目，如数字孪生、才智城市、才智园区、才智工厂等等都触及到了3D可视化技能。
今日就来给咱们讲讲怎样体系的学好WEB 3D可视化技能。
咱们能够先从threejs库下手。threejs是一个让用户经过javascript下手进入建立webgl项目的类库。众所周知学习webgl需求图形学常识，而webgl需求经过js和glsl两种言语。假如咱们不经过threejs运用webgl必然逃不过底层常识:你有必要全面了解上色器语法和自己编写极点上色片元上色；但你运用了threejs明显能够快捷的逃过这些难明的底层，关于传统js从业人员直接应战的shader确实是有难度的。
学习three.js首要把握根底概念什么是点、线、面、几何体、原料、物体、场景、相机、烘托器、动画、操控器等根底概念，搞定一个最根底的场景和3d物体的显现。接着学会调试3D开发代码。接着即可深化上诉概念的每一个概念，详细了解官网文档该类的各种特点与概念。
接着3d烘托要实在性，必定离不开PBR，详细了解什么是PBR，PBR依据物理的光照原理的烘托,。把握什么是环境贴图、凹凸贴图、置换贴图、放射光、,环境贴图、金属贴图、粗糙度贴图等等，去打造实在的物体显现作用。接着把握怎样制造粒子群，来制造雨雪、落叶、星河等各种粒子作用，乃至产品的粒子作用。
把握了这些，根本就算入了个小门了，接着便是要完成能和物体进行交互，怎样选中与场景中的物体进行交互。而且还要能够把握物理引擎让物体有实在的物理作用，例如重力，反弹、摩擦力等这样物体相互作用会愈加实在。
接着就要开端实在进入WEBGL法力的国际，把握上色器言语，操控GPU烘托，把握完成three.js底层封装的原理，能够图形烘托原理，把握编写极点上色器和片元上色器，来制造动态飘荡的旗号。以及编写动态的烟雾和乌云，水纹。
把握了这些就能够写节日酷炫的烟花了，接着能够持续把握各种后期合成作用，对整个烘托画面进行调整，例如打造闪耀的画面，雪花感的陈腐电视画面，又或许经过编写上色器，打造出水底国际的作用。
接着把握曲线和物体运动的结合，在加上上色器编写，即可完成各种飞线、雷达、光墙特效。经过地理信息数据，获取修建信息，能够生成修建的结构和高度烘托出数字城市。当然日常网页也或有一些文字信息标识，想要文字标识也加上3d作用，就需求把握css3d的烘托器来烘托。当然假如需求把握烘托精巧实在的才智园区的，就需求把握建模技能，例如学习blender软件建立模型和优化模型，才干终究输出到网页中，包括动画也能够先用blender做好在输出到网页中，不必辛苦的进行杂乱动画的编写，能够可视化的制造。
2.本地建立Threejs官方文档网站
由于Three.js官网是国外的服务器，所以为了便利学习和快速的查阅文档，咱们能够自己建立Three.js官网和文档，便利随时检查事例和文档内容进行学习。
1、首要进入threejs库GitHub地址：https://github.com/mrdoob/three.js
2、下载完好代码
3、项目文件解压缩
4、指令行装置依靠
一般装置能够用npm、yarn等包管理东西，课程以yarn举例，假如没有装置能够用npm install yarn -g进行装置。
yarn install
5、发动项目
yarn start
浏览器拜访即可：http://localhost:8080
6、文档目录介绍
build目录：
docs文档：
挑选中文，检查中文文档。
examples事例：
能够经过网址，找到详细的事例代码，如此处的文件名称是：webgl_animation_keyframes。因而能够在文件夹找到对应的代码文件
editor目录：
官方供给的可视化编辑器，能够直接导入模型，修正原料，增加光照作用等等。
3.运用vite建立three.js开发环境
为了便利模块化进行three.js项目的学习和开发，又不必学习太多的装备，增加学习本钱，所以就运用Parcel这个web运用打包东西。
Parcel官网：https://v2.parceljs.cn/getting-started/webapp/
1、装置
挑选无结构，也能够vue结构
删掉其他不相关，由于到时分three便是创立一个画布
threeJS创立几步曲
先创立场景，创立相机，创立烘托器，创立网格，设置相机方位，烘托相机
就有了最根本的网格在画布中
假如想动起来
2、项目设置
现在现已装置了 Parcel，让咱们为咱们的运用程序创立一些源文件。Parcel 承受任何类型的文件作为进口点，但 HTML 文件是一个很好的起点。Parcel 将从那里遵从您的一切依靠项来构建您的运用程序。
创立src文件夹，而且创立index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<script src="./main/main.js" type="module"></script>
</body>
</html>
设置1个css文件
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}
创立一个main.js
import * as THREE from "three";
// console.log(THREE);
// 方针：了解three.js最根本的内容
// 1、创立场景
const scene = new THREE.Scene();
// 2、创立相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机方位
camera.position.set(0, 0, 10);
scene.add(camera);
// 增加物体
// 创立几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 依据几何体和原料创立物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体增加到场景中
scene.add(cube);
// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl烘托的canvas内容增加到body
document.body.appendChild(renderer.domElement);
// 运用烘托器，经过相机将场景烘托进来
renderer.render(scene, camera);
3、打包脚本
到现在为止，咱们一直在parcel直接运转 CLI，但在您的package.json文件中创立一些脚本以简化此操作会很有用。咱们还将设置一个脚原本运用该指令构建您的运用程序以进行出产。parcel build终究，您还能够运用该字段在一个当地声明您的条目source，这样您就不需求在每个parcel指令中重复它们。
package.json：
{
"name": "01-three_basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^2.4.1"
},
"dependencies": {
"dat.gui": "^0.7.9",
"gsap": "^3.10.3",
"three": "^0.139.2"
}
}
装置依靠package.json设置的依靠
yarn install
现在您能够运转yarn build以构建您的出产项目并yarn dev发动开发服务器。
yarn dev
4.烘托第一个场景和物体
1 根本概念
三维的物体要烘托在二维的屏幕上。首要要创立一个场景来放置物体，那么终究怎样显现三维的内容，就应该找一个相机，将相机放在场景的某个方位，然后想要显现就要把相机拍的内容烘托出来。所以就引出三个根本概念：场景、相机、烘托器。
1.1 场景
three.js创立场景十分的简略。
// 1、创立场景
const scene = new THREE.Scene();
1.2 相机
three.js创立相机方针
// 2、创立相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机方位
camera.position.set(0, 0, 10);
three.js里有几种不同的相机，在这儿，咱们运用的是PerspectiveCamera（透视摄像机）。
第一个参数是视界视点（FOV）。视界视点便是不管在什么时分，你所能在显现器上看到的场景的规模，它的单位是视点(与弧度区分隔)。
第二个参数是长宽比（aspect ratio）。 也便是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播映老电影时，能够看到图画似乎是被压扁的。
接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或许比近截面近的时分，该这些部分将不会被烘托到场景中。或许现在你不必忧虑这个值的影响，但未来为了取得更好的烘托功能，你将能够在你的运用程序里去设置它。
下图椎体便是上面设置视界视点、长宽比、近截面和远截面的演示的相机透视椎体。
1.3 烘托器
接下来是烘托器。这儿是发挥魔法的当地。
// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl烘托的canvas内容增加到body
document.body.appendChild(renderer.domElement);
// 运用烘托器，经过相机将场景烘托进来
renderer.render(scene, camera);
除了创立一个烘托器的实例之外，咱们还需求在咱们的运用程序里设置一个烘托器的尺度。比如说，咱们能够运用所需求的烘托区域的宽高，来让烘托器烘托出的场景填充溢咱们的运用程序。因而，咱们能够将烘托器宽高设置为浏览器窗口宽高。关于功能比较灵敏的运用程序来说，你能够运用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2，这将使得运用程序在烘托时，以一半的长宽尺度烘托场景。
接下来将renderer（烘托器）的dom元素（renderer.domElement）增加到咱们的HTML文档中。烘托器用来显现场景给咱们看的元素。
终究便是对将相机对场景进行摄影烘托啦。这一句就能够将画面烘托到canvas上显现出来
renderer.render(scene, camera);
1.4 参加立方体
要创立一个立方体，咱们需求一个BoxGeometry（立方体）方针. 这个方针包括了一个立方体中一切的极点（vertices）和面（faces）。
接下来，关于这个立方体，咱们需求给它一个原料，来让它有色彩。这儿咱们运用的是MeshBasicMaterial。一切的原料都存有运用于他们的特点的方针。为了简略起见，咱们只设置一个color特点，值为0x00ff00，也便是绿色。这儿和CSS或许Photoshop中运用十六进制(hex colors)色彩格局来设置色彩的方法共同。
第三步，咱们需求一个Mesh（网格）。 网格包括一个几何体以及作用在此几何体上的原料，咱们能够直接将网格方针放入到咱们的场景中，并让它在场景中自在移动。
默许状况下，当咱们调用scene.add()的时分，物体将会被增加到(0,0,0)坐标。但将使得摄像机和立方体互相在一同。为了避免这种状况的产生，咱们只需求将摄像机略微向外移动一些即可。
// 增加物体
// 创立几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 依据几何体和原料创立物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体增加到场景中
scene.add(cube);
2 归纳上述代码
1、在前面创立的项目中的main.js文件写入代码
import * as THREE from "three";
// console.log(THREE);
// 方针：了解three.js最根本的内容
// 1、创立场景
const scene = new THREE.Scene();
// 2、创立相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机方位
camera.position.set(0, 0, 10);
scene.add(camera);
// 增加物体
// 创立几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 依据几何体和原料创立物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体增加到场景中
scene.add(cube);
// 初始化烘托器
const renderer = new THREE.WebGLRenderer();
// 设置烘托的尺度巨细
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl烘托的canvas内容增加到body
document.body.appendChild(renderer.domElement);
// 运用烘托器，经过相机将场景烘托进来
renderer.render(scene, camera);
作用演示：
