orbitControl

← All Butter documentation
Parameters
orbitControl()

    View p5.js documentation

    Just like in a regular p5.js sketch, a WebGL component in Butter can call orbitControl() to allow the user to rotate the content in the sketch.

    In addition to that, orbitControl() tells Butter that the sketch has a 3D asset, and opts the sketch in to all of Butter's 3D effects. This means users can add animation to the 3D orientation without you having to bake it into the code of your sketch!

    function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  clear()
  orbitControl()
  
  noStroke()
  lights()

  push()
  fill(159,142,119)
  
  push()
  translate(-50, 0)
  sphere()
  
  translate(0, -50)
  cylinder(20, 100)
  
  translate(0, -50)
  rotate(PI * 0.3)
  translate(0, 50)
  cylinder(20, 100)
  pop()
  
  push()
  rotate(PI/2)
  cylinder(50, 100)
  pop()
  
  push()
  translate(50, 0)
  sphere()
  pop()
  
  for (const x of [-50, 50]) {
    for (const z of [-25, 25]) {
      push()
      translate(x, 50, z)
      cylinder(10, 100)
      pop()
    }
  }
  
  pop()
}