Cesium API学习 Ⅰ
初步了解Cesium官网 Cesium: The Platform for 3D Geospatial
CesiumJS:CesiumJS Quickstart – Cesium
Cesium for Unity:Cesium for Unity – Cesium
Hello React Cesium - 知乎 (zhihu.com)
React集成Cesium+ThreeJs流程汇总_react cesium-CSDN博客
基础教程Cesium学习资源汇总
cesium官方案例
Cesium相关资料汇总、汇总2
cesium项目
Cesium中文教程-github, cesium中文网
Cesium源码文件夹cesium官方案例,官方API文档
Cesium基础知识学习链接
Cesium的项目定位:B/S架构下的客户端应用层面的三维开发框架
Cesium的学习路线:
Cesium进阶之路:
Web前端方向: Cesium与webpack(裁剪以及压缩),Cesium 与vue(框架设计, 嵌入复杂业务系统),Cesium的UI(UI 设计,定制可复用的Cesium交 ...
WebAPIs 知识点梳理
JS基础
整理自黑马Pink前端的课程资料;算是入门第一步;后续有时间的话,再看看书,多了解了解
Web APIs
API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
Web API 一般都有输入和输出( 函数的传参和返回值),Web API 很多都是方法(函数)
学习 Web API 可以结合前面学习内置对象方法的思路学习
1.2. DOM 介绍1.2.1 什么是DOM**文档对象模型(Document Object Model,简称DOM),是 **W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范,所有的浏览器都遵循了这套标准。
1.2.2. DOM树
DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。
文档: ...
GIS集成案例汇报
地理信息集成课程汇报(与TLQ合作,感谢!)
JavaScript基础知识Ⅲ
JS基础
整理自黑马Pink前端的课程资料;算是入门第一步;后续有时间的话,再看看书,多了解了解
11. 对象
利用字面量创建对象
使用对象字面量创建对象:就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)代码如下:
var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); }};
上述代码中 star即是创建的对象。
对象的使用
对象的属性
对象中存储具体数据的 “键值对”中的 “键”称为对象的属性,即对象中存储具体数据的项
对象的方法
对象中存储函数的 “键值对”中的 “键”称为对象的方法,即对象中存储函数的项
...
JavaScript基础知识Ⅱ
JS基础
整理自黑马Pink前端的课程资料;算是入门第一步;后续有时间的话,再看看书,多了解了解
7. 运算符(操作符)浮点数的精度问题
浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等 !
8. 断点调试断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程
断点调试的流程:1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点2、Watch: 监视,通过watch可以监视变量的值的变化,非常的常用。3、摁下F11,程序单步执行,让程序一行一行的执行, ...
react+vite+hexo|项目呈现
Vite项目打包配置详解 - 爵岚 - 博客园 (cnblogs.com)
通过Hexo + Github Pages部署你的react项目 - 掘金 (juejin.cn)
three+react|个人主页实战Ⅱ(补)
说明模仿项目地址,参考的视频教程出处,react入门
react three fiber
ChatGPT辅助生成❗自辨❗❗❗
相关库补充react-vertical-timeline-componentreact-vertical-timeline-component 是一个React库,用于创建和显示垂直时间线。这个库提供了一种简单而有效的方式来展示按时间顺序排列的事件或步骤,非常适合用于展示项目里程碑、历史事件、工作经历等。它基于React开发,因此可以轻松地集成到现有的React应用中。
核心特性
易于使用:通过提供的组件和属性,开发者可以快速构建出美观、响应式的时间线。
高度可定制:支持自定义颜色、图标和内容,使时间线能够匹配应用的风格和主题。
响应式设计:时间线会自动适应不同屏幕尺寸,保证在移动设备和桌面设备上都能良好展示。
动画效果:内置动画效果,为时间线的展示增添视觉吸引力。
基本使用要开始使用 react-vertical-timeline-component,首先需要将它添加到你的React项目中:
npm install react-vertical-timeli ...
three+react|个人主页实战Ⅳ
说明模仿项目地址,参考的视频教程出处,react入门
react three fiber
本文是对Island.jsx及其相关文件的学习解读,内容中含ChatGPT辅助生成❗自辨❗❗❗
相关案例补充Bird案例const = useGLTF(birdScene)<primitive /> is a component from React Three Fiber that allows you to directly include three.js objects into the React component tree. By setting the object prop to scene, you’re telling React Three Fiber to render the entire GLTF scene, which useGLTF hook returns, without having to manually construct the scene with React components. This is a straightfor ...
three+react|个人主页实战Ⅲ
说明模仿项目地址,参考的视频教程出处,react入门
react three fiber
本文是对Island.jsx及其相关文件的学习解读,内容中含ChatGPT辅助生成❗自辨❗❗❗
相关代码Island.jsx/*Auto-generated by: https://github.com/pmndrs/gltfjsxAuthor: nimzu (https://sketchfab.com/nimzuk)License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)Source: https://sketchfab.com/3d-models/foxs-islands-163b68e09fcc47618450150be7785907Title: Fox's islands*/import { a } from '@react-spring/three';import { useGLTF } from "@react-three/drei&q ...
three+react|个人主页实战Ⅱ
说明模仿项目地址,参考的视频教程出处,react入门
react three fiber
ChatGPT辅助生成❗自辨❗❗❗
相关库React Three@react-three/fiber表明这个包是React Three(一个专注于在React中使用three.js的项目)下的一个模块或子项目。这有助于开发者快速识别包的来源,同时也方便了对项目包的管理。
作用域包的结构让开发者更容易地发现和维护相关的包。例如,React Three项目可能包含多个相关包(如 @react-three/fiber、@react-three/drei等),这些都被归类在 @react-three这个作用域下。这种组织方式使得维护者和使用者能够轻松地识别和更新这些相互关联的包。
1. @react-three/fiber
作用:这是React Three Fiber项目的核心库,提供了将three.js集成到React的基础架构。它是一个React渲染器,允许你以声明式的方式在React应用中创建和控制3D场景。
区别:作为基础库,它不提供额外的three.js对象或抽象,而是专注于提供与React兼容 ...