发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

ThreeJs-01开发环境搭建

三萌宠

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
显示全部楼层
写在前面，好久不见各位，之前一段时间因为一些事情有点忙，但从未停止学习的脚步，也屯了很多笔记，会在未来的时间慢慢发出来，从今天开始一起进入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文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./assets/css/style.css" />
  9.   </head>
  10.   <body>
  11.    
  12.   </body>
  13. </html>
复制代码

设置1个css文件
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   background-color: skyblue;
  7. }
复制代码

创建一个main.js
  1. import * as THREE from "three";
  3. // console.log(THREE);
  5. // 目标：了解three.js最基本的内容
  7. // 1、创建场景
  8. const scene = new THREE.Scene();
  10. // 2、创建相机
  11. const camera = new THREE.PerspectiveCamera(
  12.   75,
  13.   window.innerWidth / window.innerHeight,
  14.   0.1,
  15.   1000
  16. );
  18. // 设置相机位置
  19. camera.position.set(0, 0, 10);
  20. scene.add(camera);
  22. // 添加物体
  23. // 创建几何体
  24. const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  25. const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  26. // 根据几何体和材质创建物体
  27. const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  28. // 将几何体添加到场景中
  29. scene.add(cube);
  31. // 初始化渲染器
  32. const renderer = new THREE.WebGLRenderer();
  33. // 设置渲染的尺寸大小
  34. renderer.setSize(window.innerWidth, window.innerHeight);
  35. // console.log(renderer);
  36. // 将webgl渲染的canvas内容添加到body
  37. document.body.appendChild(renderer.domElement);
  39. // 使用渲染器，通过相机将场景渲染进来
  40. renderer.render(scene, camera);
复制代码
3、打包脚本

到目前为止，我们一直在parcel直接运行 CLI，但在您的package.json文件中创建一些脚本以简化此操作会很有用。我们还将设置一个脚本来使用该命令构建您的应用程序以进行生产。parcel build最后，您还可以使用该字段在一个地方声明您的条目source，这样您就不需要在每个parcel命令中重复它们。
package.json：
  1. {
  2.   "name": "01-three_basic",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "dev": "parcel src/index.html",
  8.     "build": "parcel build src/index.html"
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "parcel": "^2.4.1"
  14.   },
  15.   "dependencies": {
  16.     "dat.gui": "^0.7.9",
  17.     "gsap": "^3.10.3",
  18.     "three": "^0.139.2"
  19.   }
  20. }
复制代码

安装依赖package.json设置的依赖
yarn install
现在您可以运行yarn build以构建您的生产项目并yarn dev启动开发服务器。
yarn dev
4.渲染第一个场景和物体

1 基本概念

三维的物体要渲染在二维的屏幕上。首先要创建一个场景来放置物体，那么最终怎么显示三维的内容，就应该找一个相机，将相机放在场景的某个位置，然后想要显示就要把相机拍的内容渲染出来。所以就引出三个基本概念：场景、相机、渲染器。
1.1 场景

three.js创建场景非常的简单。
  1. // 1、创建场景
  2. const scene = new THREE.Scene();
复制代码
1.2 相机

three.js创建相机对象
  1. // 2、创建相机
  2. const camera = new THREE.PerspectiveCamera(
  3.   75,
  4.   window.innerWidth / window.innerHeight,
  5.   0.1,
  6.   1000
  7. );
  9. // 设置相机位置
  10. camera.position.set(0, 0, 10);
复制代码
three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。
第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。
下图椎体就是上面设置视野角度、长宽比、近截面和远截面的演示的相机透视椎体。

1.3 渲染器

接下来是渲染器。这里是施展魔法的地方。
  1. // 初始化渲染器
  2. const renderer = new THREE.WebGLRenderer();
  3. // 设置渲染的尺寸大小
  4. renderer.setSize(window.innerWidth, window.innerHeight);
  5. // console.log(renderer);
  6. // 将webgl渲染的canvas内容添加到body
  7. document.body.appendChild(renderer.domElement);
  9. // 使用渲染器，通过相机将场景渲染进来
  10. 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)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
  1. // 添加物体
  2. // 创建几何体
  3. const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  4. const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  5. // 根据几何体和材质创建物体
  6. const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  7. // 将几何体添加到场景中
  8. scene.add(cube);
复制代码
2 综合上述代码

1、在前面创建的项目中的main.js文件写入代码
  1. import * as THREE from "three";
  3. // console.log(THREE);
  5. // 目标：了解three.js最基本的内容
  7. // 1、创建场景
  8. const scene = new THREE.Scene();
  10. // 2、创建相机
  11. const camera = new THREE.PerspectiveCamera(
  12.   75,
  13.   window.innerWidth / window.innerHeight,
  14.   0.1,
  15.   1000
  16. );
  18. // 设置相机位置
  19. camera.position.set(0, 0, 10);
  20. scene.add(camera);
  22. // 添加物体
  23. // 创建几何体
  24. const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  25. const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  26. // 根据几何体和材质创建物体
  27. const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  28. // 将几何体添加到场景中
  29. scene.add(cube);
  31. // 初始化渲染器
  32. const renderer = new THREE.WebGLRenderer();
  33. // 设置渲染的尺寸大小
  34. renderer.setSize(window.innerWidth, window.innerHeight);
  35. // console.log(renderer);
  36. // 将webgl渲染的canvas内容添加到body
  37. document.body.appendChild(renderer.domElement);
  39. // 使用渲染器，通过相机将场景渲染进来
  40. renderer.render(scene, camera);
复制代码
效果演示：


来源:https://www.cnblogs.com/heymar/p/18555692
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: ChartCube图表快速上手指南，轻松打造专业图表，简单到不可思议！

下一篇: 某趣G小说字体解码

发表于 2024-11-20 04:57:41

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4