SouthernWind的博客_Three.js,Vue3,HarmonyOS

HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器

状态管理看下面这张图Components部分的装饰器为组件级别的状态管理，Application部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。@Propstatic Prop(propName: string): any与

ide

Text

数据

置顶原创精选 7月前 343 阅读

Three——一、详解基础场景搭建(结尾含完整代码)

速成Three.js——一、详解基础场景搭建(结尾含源码)给模型添加标签时需要准标签部分从本章开始会从最初的搭建场景模型开始到插入精灵图部分结尾，便于刚入门three而不知如何去学起的前端工程师去学习，这里可以学到场景搭建的基础知识，引入外部模型以及动画，对模型添加标签以及优化模型方案等。详情可查找Three.js教程搭建3D场景需要认识一下场景Scene、相机Camera、渲染器Rendere

渲染器

3D

threejs

置顶原创精选 2023-05-04 11:14:34 328 阅读

Vue3——压缩字体font-spider，完美解决字体压缩后会出现字体消失现象

Vue项目打包字体完整版教程如果打包的时候字体太大，可以选择压缩字体进行处理打包前：打包后:可以看到，区别还是很明显的，下面是使用方法这里可以使用字蛛font-spider来进行压缩字蛛font-spidernpm install font-spider -g安装完成后即可使用，首先我们需要把之前不管在什么地方使用的字体样式拿到index.html页面下引入好后再次输出以下命令font-spid

ide

html

Web

原创精选 5月前 777 阅读

HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

自定义组件的生命周期允许在生命周期函数中使用 Promise 和异步回调函数，比如网络资源获取，定时器设置等；页面生命周期即被@Entry 装饰的组件生命周期，提供以下生命周期接口：onPageShow页面加载时触发，页面每次显示时触发一次，包括路由过程、应用进入前台等场景。onPageHide从第一个页面跳转第二个页面后，第一个页面会最为后台，触发onPageHide生命周期页面每次隐藏时触发一

生命周期

ide

自定义组件

原创精选 7月前 880 阅读

HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染if/else：条件渲染ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。写法和 TS 的一样，简单看一下即可@Entry @Component struct IfForEach { @State status: boolean =

数据

键值

数组

原创精选 7月前 740 阅读

HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles

HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles@Styles、@Extend、@Extend事件以及多态样式stateStyles@Styles通用样式类似于css中的class 语法一：内部样式放在struct内@Styles commonStyle(){ .backgroundColor(Color.Pin

Text

sed

多态

原创精选 7月前 279 阅读

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例声明式 UIArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Divider组件不包含构造参数（下划线组件）$r`形式引入应用资源，可应用于多

UI

Image

自定义组件

原创精选 7月前 427 阅读

HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

编辑器调整我们在每次退出编辑器后再次打开会直接进入项目文件中，这样在新建项目用起来很是不方便，所以这里跟着设置一下就好这样下次进入就不会直接跳转到当时的文件项目中！！关于汉化settings → plugins → installed → 输入 chinese → 点击 ebable → 点击 apply →重启DevEco-Studio完成汉化ArkTS路由ArkTS的路由在main_pages

json

Text

html

原创 7月前 132 阅读

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

HarmonyOS4.0应用开发安装编辑器这里安装windows版本为例安装依赖打开DevEco Studio这八项全部打钩即可开始编写代码，如果存在x，需要安装正确的库即可开发点击Create Project选择默认模板——nextModel部分分为Stage和FA两个应用模型，FA是支持7版本以内的模型支持JS和TS，而Stage支持最新版切只支持TS建议大家使用Stage模型编辑好之后点击F

实时更新

编写代码

应用开发

原创 7月前 175 阅读

ThreeJS案例——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画

准备首先我们需要两个模型，一个是场景模型，另一个是人物模型。人物模型我这里用的Threejs官网中的给的模型，名称是Xbot.glb。当然人物模型也可以自己去这个网站下载sketchfab，下载后给模型动画mixamo 下载模型动画先让入你的模型选择正确的模型文件格式这里注意一下用Blander软件给模型动画的两种方式，具体写法的区别后面会说到方式一：把每个单独的动画拆分出来方式二：将所

ide

加载

点光源

原创 7月前 1087 阅读

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）安装Vue3+ts+vitenpm init vite@latest选择y,新建项目名称,选择vue,选择vue-ts 下载完成后执行以下命令行cd 新建的项目名称 npm i npm run dev安装Element-Plusnpm insta

ios

App

css

原创 7月前 335 阅读

Vue2转Vue3快速上手第二篇（共两篇）

续上篇：teleport 传送门这里说一下传送，这个传送就是我可以把teleport标签通过to="名称"放在我想要放在的标签里面看个例子： Home.vue<template> <div id="one"> <h3>第一个div</h3> </div> <div class="two">

ide

Vue

原创精选 7月前 449 阅读

Vue2转Vue3快速上手第一篇（共两篇）

Vue3v2-v3的学习成本不高，只要有v2基础，基本可以上手vue3一、setup语法setup中不能访问v2的配置比如data，methods等二、ref响应数据使用ref可以创建一个对象，可以是基本类型，也可以是对象例如：<template> <div class="home">  {{a}} </div&g

响应式

数据

监听器

原创精选 7月前 733 阅读

Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

正投影相机正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果调整 left, right, top, bottom 范围大小如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个包围盒

ide

渲染效果

正投影

原创精选 7月前 1787 阅读 1收藏

Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）

深度冲突两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突Z-fighting。function addBox() { const geometry = new THREE.BoxGeometry(10, 10, 10); // 材质 const material = new TH

加载

超链接

下载文件

原创精选 7月前 1072 阅读 1点赞 1收藏

Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件（图片）

画布全屏以及自定义大小画布 <div class="model" style="background-color: #ff0000;" width="300" height="180" ></div>画布随窗口变化// 画布跟随窗口变化 window.onresize = function ()

超链接

下载文件

数据

原创精选 7月前 428 阅读

Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率（结尾附代码）

环境贴图作用测试MeshPhysicalMaterial清漆层MeshPhysicalMaterial和MeshStandarMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质，MeshPhysicalMaterial是MeshStandarMaterial的子集，除了继承了他的这些属性以外，还新增了清漆、透光率、反射率、光泽、折射率等等清漆层属性.clea

贴图

反射率

控件

原创精选 7月前 444 阅读

Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用

Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用metalness金属度金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。new THREE.MeshStandardMaterial({ metalness: 1.0,//金属度属性 }) // 或者 // mesh.material.metalness = 1.

贴图

编码方式

实际开发

原创 10月前 327 阅读

Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）

关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）绘制模型前端推荐使用 Blender 三维建模软件，模型推荐使用 gltf 或者 glb 文件。后续会更新 Blender 的使用方法gltfglTF（GL Transmission Format）是一种用于传输和加载 3D 模型的开放标准格式。它是由 Khronos Group 开发的，旨在提供一种轻量级、高效、可扩展的 3

加载

3D

递归遍历

原创精选 11月前 1677 阅读 1收藏

Three.js——九、纹理贴图、纹理对象阵列、地面网格辅助观察、UV坐标以及动画

创建纹理贴图const geometry = new THREE.PlaneGeometry(100, 100); //纹理贴图加载器TextureLoader const texLoader = new THREE.TextureLoader(); // .load()方法加载图像，返回一个纹理对象Texture const texture = texLoader.load( new URL

纹理贴图

贴图

ide

原创精选 11月前 1079 阅读

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

世界坐标.getWorldPosition()基础坐标也就是模型的.position属性世界坐标：就是模型资深.position和所有父对象.position累加的坐标用.getWorldPosition()属性需要用三维向量表示摸个坐标后方可读取例如：const geometry = new THREE.BoxGeometry(100, 100, 100); const materi

世界坐标

旋转动画

Group

原创精选 11月前 899 阅读

Three.js——七、Group层级模型

关于GroupGroup 层级模型通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的

Group

i++

环境光

原创精选 2023-09-18 09:18:45 474 阅读

Three.js——六、模型对象/材质

模型对象/材质三维向量 Vector3 与模型位置该类表示的是一个三维向量（3D vector）。一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为 x、y 和 z），可被用来表示很多事物，例如：一个位于三维空间中的点。一个在三维空间中的方向与长度的定义。在 three.js 中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离

Math

ide

旋转动画

原创 2023-09-15 09:26:27 121 阅读

Threejs——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移

关于几何体BufferGeomety球体SphereGeometry，立方体BoxGeometry等都是属于几何体的一部分几何体顶点位置数据和点模型偏底层，往下看缓冲类型几何体BufferGeometry如果你想创作出不规则几何形状，那么就可以通过BufferGeometry来进行自定义，也就是所谓的顶点数据例：创建一个空的几何体对象const geometry = new Three.Buff

数据

ide

置数据

原创精选 2023-09-14 09:48:43 1136 阅读

Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

Threejs 常见几何体简介Three.js 常见的几何体：常见的几何体：//BoxGeometry：长方体 const geometry = new THREE.BoxGeometry(100, 100, 100); // SphereGeometry：球体 const geometry = new THREE.SphereGeometry(50); // CylinderGeometry：圆

数据类型

子菜单

ide

原创精选 2023-09-13 16:16:22 503 阅读

Three——三、动画执行、画布大小、渲染帧率和相机适配体验

动画渲染循环threejs 可以借助 HTML5 的 API 请求动画帧 window.requestAnimationFrame 实现动画渲染。请求动画帧window.requestAnimationFrame(实现周期性循环执行)// requestAnimationFrame实现周期性循环执行 // requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性

帧率

全屏

控件

原创 2023-08-17 09:18:05 213 阅读

Three——二、加强对三维空间的认识

Three——二、加强对三维空间的认识接上个例子我们接着往下看辅助观察坐标系THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。使用方法：// AxesHelper：辅助观察的坐标系 const axesHelper = new THREE.AxesHelper(150); scene.add(axesHelper);效果如下：材质半透明设置设置材质半

点光源

环境光

控件

原创 2023-08-15 09:06:49 131 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx63d603b6c1185的博客

HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器

Three——一、详解基础场景搭建(结尾含完整代码)

Vue3——压缩字体font-spider，完美解决字体压缩后会出现字体消失现象

HarmonyOS4.0系列——07、自定义组件的生命周期、路由以及路由传参

HarmonyOS4.0 系列——06、渲染之条件渲染、循环渲染以及懒加载渲染

HarmonyOS4.0系列——04、@Styles、@Extend、@Extend事件以及多态样式stateStyles

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

ThreeJS案例——在场景中添加视频，使用人物动作以及用键盘控制在场景中行走的动画

Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

Vue2转Vue3快速上手第二篇（共两篇）

Vue2转Vue3快速上手第一篇（共两篇）

Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）

Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件（图片）

Three.js——十二、MeshPhysicalMaterial清漆层、粗糙度、物理材质透光率以及折射率（结尾附代码）

Three.js——十一、PBR材质金属度、粗糙度以及环境贴图的使用

Threejs——十、关于 gltf 模型的介绍、引入方法以及设置属性添加功能（结尾附代码）

Three.js——九、纹理贴图、纹理对象阵列、地面网格辅助观察、UV坐标以及动画

Three.js——八、坐标、更改模型原点、移除、显示隐藏模型对象

Three.js——七、Group层级模型

Three.js——六、模型对象/材质

Threejs——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移

Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

Three——三、动画执行、画布大小、渲染帧率和相机适配体验

Three——二、加强对三维空间的认识