章节一、认识three.js与开发环境学习笔记01；

一、如何学习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的学习笔记，不涉及商业盈利，如原作者认为有涉及原课程的侵权行为，请联系我删文处理！！！