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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/714316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全学习笔记1

1.了解kali及安装 vmware安装&#xff0c;用户名密码均为kali 2.metasploit是什么 3.metasploit攻击windows系统 在kali中打来终端 数据msfconsole 进入metasploit的控制终端界面 msf的使用法则&#xff1a; 1.使用模块 2.配置模块必选项 3.运行模块 三步操作、实现对…

逻辑回归与交叉熵--九五小庞

什么是逻辑回归 线性回归预测的是一个连续值&#xff0c;逻辑回归给出的“是”和“否”的回答 Singmoid sigmoid函数是一个概率分布函数&#xff0c;给定某个输入&#xff0c;它将输出为一个概率值 逻辑回归损失函数 平方差所惩罚的是与损失为同一数量级的情形&#xff0…

8、Redis-Jedis、Lettuce和一个Demo

目录 一、Jedis 二、Lettuce 三、一个Demo Java集成Redis主要有3个方案&#xff1a;Jedis、Lettuce和Redisson。 其中&#xff0c;Jedis、Lettuce侧重于单例Redis&#xff0c;而Redisson侧重于分布式服务。 项目资源在文末 一、Jedis 1、创建SpringBoot项目 2、引入依赖 …

电商小程序10分类管理

目录 1 分类数据源2 搭建功能3 创建变量读取数据4 绑定数据总结 本篇我们介绍一下电商小程序的分类管理功能的开发&#xff0c;先看我们的原型图&#xff1a; 在首页我们是展示了四个分类的内容&#xff0c;采用上边是图标&#xff0c;下边是文字的形式。使用低代码开发&#…

【系统分析师】-需求工程

一、需求工程 需求工程分为需求开发和需求管理。 需求开发&#xff1a;需求获取&#xff0c;需求分析&#xff0c;需求定义、需求验证。 需求管理&#xff1a;变更控制、版本控制、需求跟踪&#xff0c;需求状态跟踪。&#xff08;对需求基线的管理&#xff09; 1.1需求获取…

MySQL:合并查询语句

1、查询表的数据 t_book表数据 SELECT * FROM db_book.t_book; t_booktype表数据 SELECT * FROM db_book.t_booktype; 提醒&#xff1a; 下面的查询操作的数据来自上图查询表的数据 2. 使用 UNION 查询结果合并&#xff0c;会去掉重复的数据 使用UNION关键字是&#xff0c;数…

社区店经营口号大揭秘:如何吸引更多顾客?

社区店的经营口号是吸引顾客的重要工具&#xff0c;一个好的口号能够在短时间内传达店铺的特色和价值&#xff0c;并引起顾客的兴趣。 作为一名开鲜奶吧5年的创业者&#xff0c;我将分享一些关于社区店经营口号的干货&#xff0c;帮助你吸引更多的顾客。 1、突出独特卖点&…

群控代理IP搭建教程:打造一流的网络爬虫

目录 前言 一、什么是群控代理IP&#xff1f; 二、搭建群控代理IP的步骤 1. 获取代理IP资源 2. 配置代理IP池 3. 选择代理IP策略 4. 编写代理IP设置代码 5. 异常处理 三、总结 前言 群控代理IP是一种常用于网络爬虫的技术&#xff0c;通过使用多个代理IP实现并发请求…

优思学院|3步骤计算出Cpk|学习Minitab

在生产和质量管理中&#xff0c;准确了解和控制产品特性至关重要。一个关键的工具是Cpk值&#xff0c;它是衡量生产过程能力的重要指标。假设我们有一个产品特性的规格是5.080.02&#xff0c;通过收集和分析过程数据&#xff0c;我们可以计算出Cpk值&#xff0c;进而了解生产过…

CentOS 定时调度

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

Java中灵活使用Mockito

目录 Java中灵活使用Mockito引言Mockito简介基本用法实例演示使用场景和案例解决方案结语 Java中灵活使用Mockito 引言 Mockito是Java中常用的mock框架之一&#xff0c;用于进行单元测试时模拟对象的行为。本文将介绍Mockito的基本用法&#xff0c;并探讨如何在实际项目中灵活…

AP8P059 PIR 人体感应太阳能 LED 灯控制芯片

概述 AP8P059 是一款集成低压 LDO、光控、充电控制、过充保护、欠压保护、PIR感应、延时为一体的人体感应太阳能 LED灯控制芯片&#xff0c;只需要很少的外接元件&#xff0c;适用于锂电池供电的PIR人体感应LED灯具的应用。外置的一级带通增益放大器便于客户调整感应灵敏度&am…

QT MinGW64编译vlc源码

编译环境搭建 参考文章《QT Mingw32/64编译ffmpeg源码生成32/64bit库以及测试》&#xff0c;搭建msys64环境&#xff1b; 运行msys.exe,运行&#xff1a; pacman -S git subversion cvs automake autoconf libtool m4 make gettext pkg-config mingw-w64-i686-lua findutils …

docker配置数据默认存储路径graph已过时,新版本中是data-root

错误信息 我在修改/etc/docker/daemon.json文件中&#xff0c;添加存储路径graph字段。然后sudo systemctl restart docker包如下错误&#xff1a;使用journalctl -xeu docker.service错误信息&#xff0c;发现不能匹配graph字段。 原因 我的docker版本&#xff1a; 在doc…

mybatisplus整合flowable-ui-modeler报错

1、问题 Description:file [/Users/xingyuwei/Documents/project/java/springboot_01/target/classes/com/xingyu/mapper/TemplateMapper.class] required a single bean, but 2 were found:- sqlSessionFactory: defined by method sqlSessionFactory in class path resource…

TypeScript08:在TS中使用模块化

前言&#xff1a;tsconfig.json中的配置 一、前端领域中的模块化标准 前端领域中的模块化标准有&#xff1a; ES6、commonjs、amd、umd、system、esnext 二、 TS中如何书写模块化语句 TS 中&#xff0c;导入和导出模块&#xff0c;统一使用 ES6 的模块化标准。 myModule.ts &a…

Keil新版本安装编译器ARMCompiler 5.06

0x00 缘起 我手头的项目在使用最新版本的编译器后&#xff0c;烧录后无法正常运行&#xff0c;故安装5.06&#xff0c;测试后发现程序运行正常&#xff0c;以下为编译器的安装步骤。 0x01 解决方法 1. 下载编译器安装文件&#xff0c;可以去ARM官网下载&#xff0c;也可以使用我…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制&#xff1a;64.0MB C/C时间限制&#xff1a;200ms Java时间限制&#xff1a;600ms Python时间限制&#xff1a;1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x&#xff0c;y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

02.刚性事务

刚性事务 1.DTP模型 X/Open组织介绍 X/OPEN是一个组织&#xff08;现在的open group&#xff09;X/Open国际联盟有限公司是一个欧洲基金会&#xff0c;它的建立是为了向UNIX环境提供标准。它主要的目标是促进对UNIX语言、接口、网络和应用的开放式系统协议的制定。它还促进在…