一、如何學習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-dev3、安裝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 serve2、修改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的學習筆記，不涉及商業盈利，如原作者認為有涉及原課程的侵權行為，請聯系我刪文處理！！！?
