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兼容 ...
three+react|个人主页实战Ⅰ
说明模仿项目地址,参考的视频教程出处,react入门
react three fiber
教程npm create vite@latest ./ 在当前目录安装react
npm install 安装需要的包
npm run dev 运行开发环境
delete src folder, and create a new one called ‘src’.
new file ‘main.jsx’ and code, change ‘tsx’ to ‘jsx’ in ‘main.html’
new file ‘App.jsx’ and code ➡️ rafce shortcut(ES7+React… plugin embeded)
open a new TERMINAL then npm install -D tailwindcss postcss autoprefixer, npx tailwindcss init -p, configure path,
documentation
install ‘npx’ in advance: npm i -g npx
new file ‘in ...
ARFoundation学习
学习方式
加入一些 ar 技术交流群,看一些博客。博客推荐_davidwang_的 arfoundation 之路,csdn 上的。可以读一些官方文档,像 ARCore 和 ARKit 的。每年的 wwdc 苹果全球开发者大会都会有人讲 ARKit 有哪些新的功能,可以去理解底层是如何设计的。unity 官方也会出一些视频讲 ar 方面的内容
打包教程 https://www.bilibili.com/video/BV1Qt4y1a7aW?p=11&vd_source=5270415d668b21206238403450bb29b5 notes: ios的打包教程,需要有ios的环境(但我们没有苹果电脑,此外我在尝试给实验室工位上的电脑装虚拟机,之前试过一次失败了;可以回头搜一搜哔哩哔哩,找找怎么配置) https://blog.51cto.com/myselfdream/2493033 2
实操案例AR Foundation | AR Foundation | 5.1.0 (unity3d.com)
AR Foundation手册:https://docs.unity3d. ...
DOTween学习
DOTween入门(81条消息) DOTween 插件下载及基本使用说明_dgtweening下载_四月的小白的博客-CSDN博客
面板Tools->Demigiant->DoTween utility panel
组件常用参数说明:
AutoPlay:自动播放动画
AutoKill:自动删除动画
Duration:动画时长
Delay:延迟时长(过一段时间再播放)
Ease:动画播放的速度曲线
Loop:循环的次数(-1表示一直执行)
LoopType:循环模式(Restart:重新开始,Yoyo:来回摆动,Incremental:增量模式)
PathType:路径模式(CatmullRom:曲线;Linear:直线)
ClosePath:路径是否首尾相连
LocalMovement:是否是本地坐标
Orientation:运动朝向(ToPath:朝向路径方向,Look At Transform:朝向物体,Look At Position:朝向坐标点)
Events中是动画各状态时的对应事件添加按钮,和Button的触发事件添加方法一样
(81条消息) unity中的DG ...
Lua/XLua学习
Lua入门语法教程:Lua 基本语法 - Lua中文手册 (dba.cn)
print("hello world") -- note--[[ note]]
执行
$ lua filename.lua
一般约定,以下划线开头连接一串大写字母的名字(比如 _VERSION)被保留用于 Lua 内部全局变量。
在默认情况下,变量总是认为是全局的。
全局变量不需要声明,给一个变量赋值后即创建了这个全局变量,访问一个没有初始化的全局变量也不会出错,只不过得到的结果是:nil。
如果你想删除一个全局变量,只需要将变量赋值为nil。
nilboolean, true, falsenumberstring, "", [[]], str1 .. str2, #str, table, {}, table[key]=value, key从1开始, function, function end, fun2=fun1, type()
匿名函数
function anonymous(tab, fun) for k, v in pairs(tab ...
源码学习技巧
参考资源https://zhuangbiaowei.gitbook.io/learn-with-open-source/https://boholder.github.io/blogs/learn-from-source-code/
笔记如何选择开源项目一个领域的能力体系:
flowchart TD1(创造能力) --> 2(理解能力)1 --> 3(逻辑能力)2 --> 4(基础知识)3 --> 42 --> 5(编程技能)3 --> 52 --> 领域知识3 --> 领域知识
基础知识:包括计算机、数学、算法、逻辑等,通过学习书本教材;
编程技能:学习具体的语言;
领域知识:和工作方向有关,如企业级应用的开发,需要了解管理制度、财务、成本、仓储等知识;
提高代码质量的书推荐:
Clean Code
Design Patterns: Elements of Reusable Object-Oriented Software
Clean Architecture: A Craftsman’s Guide to Software S ...
Mapbox SDK for Unity | 官方案例Ⅱ
Zoomable map<b>Worldwide Dynamic Zoom & Panning Support </b>它里面用了SpawnOnMap的脚本,来在地图上自定义符号。This example is a starting point for creating a traditional web-based zoomable map. Go anywhere in the world and check out Mapbox’s high-quality satellite imagery. It also uses the SpawnOnMap script to instantiate custom markers on the map at specified locations.
Iconic buildings涉及到对于高精度的模型,怎么放置到地图上;
<mark>replace features </mark>的demo是这个的具体操作,Globe的demo里也有放置了自定义标签在地图上的操作;
在abstr ...