threejs

如下图 main.js 第一步画圈 lyw.js 如下图： 第二步画中间的小圈圈并循环构建出来并添加到group中 计算x轴离原点的距离 第二个圆: 120 第三个圆: 142.5 并且线的LineW

用到 划线的Api 曲线 API 是一些计算曲线坐标的公式，从中取出一些点，用点模型或者线模型画出来 EllipseCurve 画椭圆曲线 用来画规则曲线用的 new THREE.EllipseCur

main.js uv.js geometry.attributes.uv 是和顶点一一对应的 uv 坐标。 也就是 4 个顶点分别对应了 4 个 uv 坐标 其实我们可以用点集合的方式来设置 图如下:

MeshBasicMaterial: 基础网络材质 这种材质不受光照影响 继承 Material类 具体看官网的描述 纹理没特殊要求尽量调小压缩对gup好一点 效果如下图: 贴图效果加上了纹理了 后面

接入simplex-noise库 https://www.npmjs.com/package/simplex-noise包地址 具体使用查看上面的地址 里面的使用的噪音算法 mesh.js main.

cube.js main.js 效果如下图:cube.js main.js 效果如下图:cube.js main.js 效果如下图:

按照GUI界面库 npm i dat.gui -S 全部代码 本节学习代码部分 图如下所示按照GUI界面库 npm i dat.gui -S 全部代码 本节学习代码部分 图如下所示

全部代码 本节学习代码如下: 效果如下:全部代码 本节学习代码如下: 效果如下:全部代码 本节学习代码如下: 效果如下:

全部代码 本章学习处代码 监听时候可以加一个节流的方法,避免设置太快(建议)全部代码 本章学习处代码 监听时候可以加一个节流的方法,避免设置太快(建议)

npm run gsap 官方文档: https://gsap.com/docs/v3/ 动画的ease: 找对应的方式 全部代码 动画部分的使用

时钟方面的设置 如下图:阿迪斯发士大夫十大发射点发撒打发范德萨啊手动阀士大夫大师傅地方的打发手动阀地方

window.requestAnimationFrame()  方法会告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。 具体了解再mdn: + https://de

集合物体对象里面有一个 scale{x,y,z}的属性 scale是缩放的属性(也是一个对象,里面参数x、y、z) x是x轴的缩放倍数 y是y轴的缩放倍数 z是z轴的缩放倍数 参数都是数字 整体设置

cube.position.set(5, 0, 0); x、y、z轴位置 cube.position.x = 5; 设置单个方向x轴的位置 渲染如图下(每一帧加0.01):

辅助线方便查看3维物体 渲染图如下:辅助线方便查看3维物体辅助线方便查看3维物体辅助线方便查看3维物体辅助线方便查看3维物体

2-轨道控制器查看物体2-轨道控制器查看物体2-轨道控制器查看物体2-轨道控制器查看物体鼠标拖动后就可以看到各个面了如下图

threejs使用threejs渲染第一个场景和物体记录学习和通常的渲染步骤threejs使用threejs渲染第一个场景和物体记录学习和通常的渲染步骤