统计
  • 建站日期:2021-03-10
  • 文章总数:3812 篇
  • 评论总数:29 条
  • 分类总数:43 个
  • 最后更新:5月22日
文章 未分类

p5.js 3D图形-立方体

AIGC记者
首页 未分类 正文

立方体的基础用法

p5.js 里使用 box() 方法可以创建立方体。

基础语法说明

根据官网的说明,box() 语法如下:

box([width], [height], [depth], [detailX], [detailY])

官网给出的参数解释我觉得有点绕,以下是我的理解

width:立方体的宽度(选填),默认值是 50。 height:立方体的高度(选填)。 depth:立方体的深度(选填)。 detailX:一个用于指定立方体在x轴方向上的细分级别的数字,数值越大,立方体的表面越平滑。(选填) detailY:一个用于指定立方体在y轴方向上的细分级别的数字,数值越大,立方体的表面越平滑。(选填)
首先需要了解 widthheightdepth 这3个参数,它们都是可选参数,传参时会出现以下几种情况:

3个参数都不传的情况:它们的值默认为50。 只传 width 的情况:heightdepth 都会跟着使用 width 的值。 传了 widthheight 的情况:depth 会使用 height 的值。 3个参数都有传的情况:各自使用各自的值。
动手试试

先试试创建一个基础立方体。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第1
张图片


  function setup() {
    createCanvas(200, 200, WEBGL) // 创建 200 * 200 的画布
    background(200) // 设置画布背景色(灰色)
    box(100) // 创建立方体
  }

这个例子使用 box() 创建出来的立方体,看上去不像立方体,只是一个平面。主要原因是我们是正对着它,所以只能看到它的一个面。

旋转一下角度就看到它是一个立方体了。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第2
张图片


  function setup() {
    createCanvas(200, 200, WEBGL) // 创建 200 * 200 的画布
    background(200) // 设置画布背景色(灰色)
    // 旋转角度
    rotateX(10)
    rotateY(10)
    box(100) // 创建立方体
  }

设置样式

给立方体设置样式,要把样式函数写在 box() 前!!!

填充色 fill

使用 fill() 方法可以设置填充色。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第3
张图片


  function setup() {
    createCanvas(200, 200, WEBGL) // 创建 200 * 200 的画布
    background(200) // 设置画布背景色(灰色)

    // 旋转角度
    rotateX(10)
    rotateY(10)

    // 填充色
    fill(255, 0, 0)

    box(100) // 创建立方体
  }

不使用填充颜色

box() 的默认填充色是白色,如果你不需要填充色,可以使用 noFill() 方法进行修改。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第4
张图片


  function setup() {
    createCanvas(200, 200, WEBGL) // 创建 200 * 200 的画布
    background(200) // 设置画布背景色(灰色)

    // 旋转角度
    rotateX(10)
    rotateY(10)

    // 不使用填充颜色
    noFill()

    box(100) // 创建立方体
  }

描边颜色 stroke

使用 stroke() 方法可以设置立方体的描边颜色。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第5
张图片


  function setup() {
    createCanvas(200, 200, WEBGL)
    background(200)

    noFill()
    stroke(255, 0, 0) // 设置红色边框颜色

    rotateX(10)
    rotateY(10)

    box(100)
  }

设置边框宽度

使用 strokeWeight() 方法可以设置立方体边框宽度,需要传入一个数值型数据。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第6
张图片


  function setup() {
    createCanvas(200, 200, WEBGL)
    background(200)

    noFill()
    stroke(255, 0, 0) // 设置红色边框颜色
    strokeWeight(4) // 设置边框宽度

    rotateX(10)
    rotateY(10)

    box(100)
  }

纹理

除了基础的填充和描边外,立方体还可以设置纹理。

纹理可以是图片,也可以是视频。我先用图片资源举例。

将纹理贴到立方体上,有以下几个步骤:

加载纹理资源(图片或者视频) 设置纹理 创建立方体

p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第7
张图片


  let myTexture = null

  function preload() {
    myTexture = loadImage('texture.gif') // 加载纹理
  }

  function setup() {
    createCanvas(200, 200, WEBGL)
    background(200)

    rotateX(0.5)
    rotateY(0.5)

    texture(myTexture) // 设置纹理

    box(100) // 创建立方体
  }

在这个例子中,我加载了一个 gif 纹理,但这个纹理贴到立方体上是不会动的,因为立方体是在 setup() 里创建的,如果需要它会动,我们需要在 draw() 声明周期里设置纹理和创建立方体。这部分我会放到后面“动画”章节讲。

光照效果

你没看错,p5.js 也有提供了光照效果的,我在前面的文章没讲过光照效果,本文也不会讲这部分(我要留到下一篇水文里讲),但工友们也可以先了解一下这部分内容。

我使用了 环境光 ambientLight()定向光 directionalLight() 打在立方体上。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第8
张图片


  function setup() {
    createCanvas(200, 200, WEBGL)
    background(200)

    rotateX(10)
    rotateY(10)

    ambientLight(255) // 设置环境光照
    directionalLight(255, 255, 255, 0, 0, -1) // 设置定向光照

    box(100)
  }

可以看出,不同面的颜色是有点不一样的。

动画

要做动画非常简单,只需要在 draw() 生命周期里改变立方体的属性即可。

除此之外,我们还要了解 frameCount,这是 p5.js 提供的一个全局系统变量,它记录了 p5.js 运行了多少帧。在 setup() 时,frameCount 的值是0,之后每执行一次 draw() 都会给 frameCount 加1。

旋转动画

比如想做旋转动画,只要在 draw() 里不断的改变 rotateXrotateYrotateX 就能出一个不错的效果。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第9
张图片


  function setup() {
    createCanvas(200, 200, WEBGL)
  }

  function draw() {
    // 每次刷新都要重新填充画布颜色,不然会留下上一次绘制的立方体
    background(200)

    // 旋转
    rotateX(frameCount * 0.01)
    rotateY(frameCount * 0.01)
    rotateZ(frameCount * 0.01)

    // 绘制立方体
    box(100)
  }

gif 贴图

在前面的纹理例子中我们已经知道怎么贴图了,如果你贴的是gif动图,又希望这个图是真的能在运行时动起来,就需要在 draw() 设置纹理贴图了。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第10
张图片


  let myTexture = null

  function preload() {
    myTexture = loadImage('texture.gif') // 加载gif
  }

  function setup() {
    createCanvas(200, 200, WEBGL)
  }

  function draw() {
    background(200)

    rotateX(frameCount * 0.01)
    rotateY(frameCount * 0.01)
    rotateZ(frameCount * 0.01)

    // 设置纹理贴图
    texture(myTexture)
    box(100)
  }

视频纹理

设置视频纹理其实和设置图片纹理差不多,只是加载的资源类型不同。

使用 createVideo() 方法加载视频资源,然后要将视频隐藏,不然它会在页面中占位。


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第11
张图片


let video = null

function preload() {
  video = createVideo('video.mp4') // 加载 mp4
  video.hide() // 隐藏视频元素
}

function setup() {
  createCanvas(640, 480, WEBGL)
  video.loop() // 循环播放
  video.volume(0) // 设置音量
}

function draw() {
  background(200)

  rotateX(frameCount * 0.01)
  rotateY(frameCount * 0.01)

  // 设置视频纹理
  texture(video)
  box(200)
}

上面的代码还是用了 video.loop()video.volume() 方法。

video.loop():循环播放。 video.volume():设置视频音量,取值范围是 0 ~ 1
小案例

p5.js 是一个偏艺术类的 canvas 库,我们已经掌握了 box() 基础用法创建出立方体,接下来再理解几个小案例应该就有能力自己去实现一些特效了。非常适合在掘金整活~

案例1:Rotate Push Pop

第一个案例叫《Rotate Push Pop》,是 processing 的一个例子,我把他的代码转成使用 p5.js 编写。

先提一嘴 processingp5.js 的关系:processing 是用 Java 编写的,而 p5.jsprocessingJS 版。

先看看本例效果和代码


p5.js3D图形-立方体
-IT菜鸡教程网-IT技术博客
-第12
张图片


  let a = 0
  let offset = Math.PI / 24
  let num = 12

  function setup() {
    createCanvas(440, 460, WEBGL)
    noStroke()
  }

  function draw() {
    lights()
    background(200, 200, 200)

    for(let i = 0; i 

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
客服邮箱:kefu@itcaiji.cn
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
禁止在代码中使用异常,一次时隔7年的复盘
« 上一篇
2023 Gartner® 云数据库管理系统魔力象限发布 PingCAP 入选“荣誉提及”
下一篇 »
为了防止灌水评论,登录后即可评论!

已有 3 条评论

  1. 小菜鸡 V管理员
    2024-01-21 19:27         MacOS /     Google Chrome

    说道:非常不错

  2. 小菜鸡 V管理员
    2024-01-21 19:26         MacOS /     Google Chrome

    说道:挺好

  3. 小菜鸡 V管理员
    2024-01-21 19:26         MacOS /     Google Chrome

    说道:不错

热门文章

1
2
什么是高防CDN
4
推特计划推出点对点支付功能
5
p5.js 3D图形-立方体

标签