动画react fiber three
10-react不同层级的组件之间的数据传递数据 createContext 上下文
// 组件传值 props 接收传递过来的数据 import ReactDom from "react-dom" import { createContext, Component } from "react" // createContext is useed to create a contex ......
09-react的组件传值 props
// 组件传值 props 接收传递过来的数据 import ReactDom from "react-dom" import { Component } from "react" // 类组件中使用函数组件 和 类组件 注意区分不同的组件使用不同方式接收数据 const Hellow = (pro ......
08-react修改state数据驱动视图UI的更新【注意和vue的区别】
// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理：修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } f ......
记录一下MAX在动画制作中遇到文件大小无限膨胀的BUG
最新在用MAX的biped骨骼做动画，一个简单的角色动画，用到了运动混合器，随着项目的推进，诡异的事情开始出现，文件变得无比庞大，但文件内都是链接，模型面数也不到1w，但文件大小却膨胀到了300多MB 这使得打开和保存变得无比慢，但是用首选项里的“压缩保存的文件”选项却可以把工程文件压缩到4MB 大 ......
07 - react 唯一修改state状态的方式 setState
// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变 // setState 的原理：修改玩状态之后会调用 render 函数 import ReactDom from "react-dom" import { Component } f ......
06 - react的类组件中的状态state render函数 this指向问题 事件绑定
// 注册事件 import ReactDom from "react-dom" import { Component } from "react" // 类组件中的状态 通过 this.state.xxx 来获取状态 class Hello extends Component { // 事件对象 ......
react的类组件和函数组件 -- 状态 state
// 函数组件是无状态的 既没有数据的 类似 vue 组件中的 data 数据 // 类组件是有状态的组件 是有数据的 是双向绑定的数据 是数据驱动视图的 负责UI的视图更新 （单个组件的私有数据组件之间的数据是独立的） import ReactDom from "react-dom" import ......
Three.js教程：Face3对象定义Geometry的三角形面
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 Face3对象定义Geometry的三角形面 几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位 ......
完整实现React day10
update流程与mount流程的区别。 对于beginWork： 需要处理ChildDeletion的情况 需要处理节点移动的情况（abc -> bca） 对于completeWork： 需要处理HostText内容更新的情况 需要处理HostComponent属性变化的情况 对于commitWo ......
react- hooks 之 useMemo
1. 传入数组的变量需要在使用前进行定义， const [issueType, setIssueType] = useState('1'); const issueDisable = useMemo(() => { console.log('issueType 改变啦', issueType, da ......
React中的另一种状态管理方案Valtio
React中的状态管理是开发人员需要解决的问题。 总有一些新库给你选择，而选择合适的库可能是一项困难的工作 状态管理一直是React中开发人员需要解决的问题，如何有条理的组织数据，如何快速的在项目中集成，这些都是我们做项目时选择技术的标准。 Redux一直是我们react项目中不二的状态管理插件，但 ......
Three.js教程：设置Geometry顶点位置、顶点颜色数据
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 前面几篇文章通过缓冲类型几何体BufferGeometry给大家讲解了顶点位置、颜色、法向量、索引数据，本节课给大家引入一个新的threejs几何体APIGeometry。几何体Geometry和缓冲类型几何体Buff ......
css渐变实现进度条动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
CF1699A The Third Three Number Problem
###题意简述 构造出一个三元组a,b,c使得(a ⊕ b)+(a ⊕ c)+(b ⊕ c) = n,若无解输出-1。 符号 ⊕ 的意思为异或 ###个人分析 首先要了解异或符号的性质： 1,x⊕0=x 2,x⊕x=x 根据异或符号的性质可以得到一下构造： a=b=0,c=n/2 c=0,a=b=n ......
react的基本：条件渲染
import reactDom from "react-dom" // 条件渲染 if else let loading = false // 写一个函数用于加载 const loadData = () => { if(loading) { return <div>数据加载中</div> }else ......
THREE
@(THREE.js + 语音识别控制) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 使用aframe加载模型，然后使用语音识别功能对模型进行控制，模型可做起跳 ......
Three 解决加载模型闪烁
@(Three 解决加载模型闪烁) 概述 在一次使用 three加载模型中遇到模型闪烁严重的问题，相机拉得越远模型闪烁越厉害，出现此问题的原因是因为出现了深度问题，以下记录解决办法 解决方法 WebGLRenderer开启logarithmicDepthBuffer logarithmicDepth ......
AR人脸识别 Three
@(AR人脸识别 Three.js + tensorflow.js（一）) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取：https://item.ta ......
AR室内导航-Three
@(AR室内导航-Three.js) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取：https://item.taobao.com/item.htm?s ......
maptalks+three实战项目 智慧城市项目
@(maptalks+three实战项目 智慧城市项目) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取： https://item.taobao.com ......
react中jsx的基本使用
// 使用 createElement太繁琐 不直观 不优雅开发体验不好 代码维护不行 // jsx 不是 js 而是 js的扩展语法 // jsx 是react的核心内容 // react项目中已经有了 bable 所以在react项目中直接使用 jsx 语法 【自动编译】 // jsx 的写法就 ......
react的基本使用
// 导入react和react-dom包 import react from 'react' import reactDom from 'react-dom' // console.log(react) // console.log(reactDom) // 创建react元素 // 参数 1. ......
react 更新状态中的对象
State 可以保存任何类型的 JavaScript 值，包括对象。但是你不应该直接改变你在 React 状态下持有的对象。相反，当你想更新一个对象时，你需要创建一个新对象（或复制一个现有对象），然后设置状态以使用该副本。 const [position, setPosition] = useSta ......
为什么以及什么时候 React 会渲染一个组件
组件显示到屏幕之前，其必须被 React 渲染。 在您触发渲染后，React 会调用您的组件来确定要在屏幕上显示的内容。“渲染中” 即 React 在调用您的组件。 在进行初次渲染时, React 会调用根组件。 对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件。 这个过程是递归 ......
react18中antd的select选择器组件自定义下拉框的内容
效果如图 导入组件和图标 import { Select } from 'antd' import { ManOutlined, WomanOutlined } from '@ant-design/icons'; const { Option } = Select; 数据 let userListO ......
react点击滑块验证
css .wrap-num { width: 300px; } @keyframes defaultWave { 0% { transform: scale(1); } 20% { transform: scale(1.23); } 40% { transform: scale(1); } 100% ......
Three.js教程：顶点索引复用顶点数据
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点索引复用顶点数据 通过几何体BufferGeometry的顶点索引属性BufferGeometry.index可以设置几何体顶点索引数据，如果你有WebGL基础很容易理解顶点索引的概念，如果没有也没有关系，下面会通过 ......
重拾react杂记
import { param,setParam} from 'React' 组件的名称必须以大写字母开头 <TableOfContents /> 每个js文件只有一个 export default function xx(){} 你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中 ......
React和Vue的区别
React和Vue是两个非常流行的JavaScript框架，用于构建前端Web应用程序。以下是它们之间的一些区别： 模板语法：Vue使用模板语法，它允许您在HTML模板中嵌入Vue代码，类似于AngularJS。React使用JSX语法，它允许您将JavaScript代码嵌入HTML模板中。 数据绑 ......