React 17 正式版发布

React 17 正式版已经发布,本次版本变更日志如下:React为全新的 JSX 转换器添加 react/jsx-runtime 和 react/jsx-dev-runtime。根据原生框架构建组件调用栈。可以在 context 中设置 displayName 以改善调用栈信息。防止 'use strict' 从 UMD 的 bundles 中泄露。停止使用 fb.me 进行重定向。React

- 阅读全文 -

Vue3.x和Vue2.x的不同之处

Vue3.x和Vue2.x的不同点1、main.js引入方式不一样// vue3 //code by www.joynop.com import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') // 没有全局的Vue// vue2.X //code by www.joynop.co

- 阅读全文 -

前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响?

现在很多笔记本电脑都推荐将缩放设置为125%,等比例放大显示。(垃圾Windows这对我们前端的页面的布局会产生一些影响首先,单独的响应式布局hold不住这个问题,因为出问题的是device-pixel-ratio。问题现象是高分屏下整好的东西,在普分屏下会放大;而普分屏下整好的东西,在高分屏上会缩小。重现这个问题不需要高分屏,直接用Ctrl++或者Ctrl+-出来的效果是跟高分屏一致的(所以搞定

- 阅读全文 -

学会threejs鼠标交互Raycaster拾取物体

对场景内的模型增加事件监听,实现鼠标交互,须要用到Raycaster(光线投射)类。拾取物体的原理webGL中获取鼠标交互物体的原理:通过三维空间中相机视点与鼠标在屏幕上的地位的连线,造成一条直线,捕捉与此直线相交的空间中的物体,即为交互对象物体。在three中,Raycaster为咱们封装了大量的逻辑代码,包含生成相机到鼠标的射线、射线与空间物体的碰撞检测、射线相交物体深度计算、相交物体列表等等

- 阅读全文 -

JavaScript脏检查

什么是脏检查?脏检查的全名是 脏数据检查。是AngularJS命名的。脏数据也就是产生了变化的数据。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty这种接口,而是在某些情况下制定策略,通过复制保存一份数据,进行快照对比,来监测变化。脏检查这个东

- 阅读全文 -

GoLang IOTA

iota,特殊常量,可以认为是一个可以被编译器修改的常量。iota 在 const关键字出现时将被重置为 0(const 内部的第一行之前),const 中每新增一行常量声明将使 iota 计数一次(iota 可理解为 const 语句块中的行索引)。iota 可以被用作枚举值:const ( a = iota b = iota c = iota )第一个 iota 等于

- 阅读全文 -

js 位掩码

定义掩码const mask0 = parseInt("00000001", 2); const mask1 = parseInt("00000010", 2); const mask2 = parseInt("00000100", 2); const mask3 = parseInt("00001000", 2);

- 阅读全文 -

模型对象旋转平移缩放变换

点模型Points、线模型Line、网格网格模型Mesh等模型对象的基类都是Object3D,如果想对这些模型进行旋转、缩放、平移等操作,如何实现,可以查询Threejs文档Object3D对相关属性和方法的介绍。缩放网格模型Mesh的属性.scale表示模型对象的缩放比例,默认值是THREE.Vector3(1.0,1.0,1.0),.scale的属性值是一个三维向量对象Vector3,查看th

- 阅读全文 -

ThreeJs常用材质介绍

为了方便开发Threejs提供了一系列的材质,所有材质就是对WebGL着色器代码的封装,如果你不了解WebGL,会通过查阅Threejs文档使用相关材质类即可。点材质PointsMaterial点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial。点材质PointsMaterial的.size属性可以每个顶点渲染的方形区域尺寸像素大小。va

- 阅读全文 -

顶点颜色数据插值计算

通常几何体顶点位置坐标数据和几何体顶点颜色数据都是一一对应的,比如顶点1有一个顶点位置坐标数据,也有一个顶点颜色数据,顶点2同样也有一个顶点位置坐标数据,也有一个顶点颜色数据...每个顶点设置一种颜色代码更改为下面代码设置,你可以看到几何体的六个顶点分别渲染为几何体设置的顶点颜色数据。流量大佬请戳下方高清视频var geometry = new THREE.BufferGeometry(); //

- 阅读全文 -

JavaScript类型化数组

JavaScript 类型化数组讲解类型数组必然要联系到Javascript语言一直存在的普通数组, 普通数组的创建方式是使用运算符中括号[]或者Javascript语言内置的Array()构造函数。 类型数组的创建方式一般使用Int8Array等构造函数。为了降低Javascript语言的编程门槛,简化封装底层的计算机知识,在最初的Javascript语言中设计的Array数组, 可以支持任意数

- 阅读全文 -

ThreeJS 设置材质效果

半透明效果更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数,添加opacity和transparent属性,opacity的值是0~1之间,transparent表示是否开启透明度效果, 默认是false表示透明度设置不起作用,值设置为true,网格模型就会呈现透明的效果,使用下面的代码替换原来的球体网格模型的材质, 刷新浏览器,通过鼠标旋转操作场景,可

- 阅读全文 -