Skip to content

Latest commit

 

History

History
207 lines (164 loc) · 3.66 KB

w06.md

File metadata and controls

207 lines (164 loc) · 3.66 KB

3D Custom Shapes

  • index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
  <script src="sketch.js"></script>
  <title>WEBGL 연습</title>
</head>
<body>
  <h1>3D Custom Shapes</h1>
</body>
</html>
  • sketch.js (0)
let angle = 0;
// let kitten;

// function preload() {
//     kitten = loadImage('kitten0.jpg');
// }

function setup() {
    createCanvas(400, 300, WEBGL); 
}
  
function draw(){
    background(0);
    ambientLight(100);
    // ambientMaterial(255);
    normalMaterial();
    directionalLight(255, 255, 255, 0, 0, -1);
    rotateX(angle);
    rotateY(angle * 1.3);
    rotateZ(angle * 0.7);

    // texture(kitten);
    // box(100);

    beginShape();
        vertex(0, 0);
        vertex(100, 0);
        vertex(100, 100);
        vertex(0, 100);
    endShape(CLOSE);
    
    angle += 0.03;
}
  • sketch.js (1)
let angle = 0;
// let kitten;

// function preload() {
//     kitten = loadImage('kitten0.jpg');
// }

function setup() {
    createCanvas(400, 300, WEBGL); 
}
  
function draw(){
    background(0);
    ambientLight(100);
    ambientMaterial(255);
    // normalMaterial();
    directionalLight(255, 255, 255, 0, 0, -1);
    rotateX(angle);
    rotateY(angle * 1.3);
    rotateZ(angle * 0.7);

    // texture(kitten);
    // box(100);

    fill(255);
    translate(-50, -50);
    beginShape();
        vertex(0, 0, 0);
        vertex(100, 0, 0);
        vertex(100, 100, 0);
        vertex(0, 100, 0);
    endShape(CLOSE);
    
    angle += 0.03;
}
  • sketch.js
let angle = 0;
let kitten;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
}
  
function draw(){
    background(0);
    ambientLight(100);
    ambientMaterial(255);
    normalMaterial();
    directionalLight(255, 255, 255, 0, 0, -1);
    rotateX(angle);
    rotateY(angle * 1.3);
    rotateZ(angle * 0.7);

    // fill(255);
    textureMode(NORMAL);
    texture(kitten);
    translate(-50, -50);
    beginShape();
        vertex(0, 0, 0, 0, 0);
        vertex(100, 0, 0, 1, 0);
        vertex(50, 50, 0, 1, 1);
        vertex(0, 100, 0, 0, 1);
    endShape(CLOSE);
    
    angle += 0.03;
}
  • sketch.js (2)
let angle = 0;
let kitten;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
}
  
function draw(){
    background(0);
    ambientLight(100);
    ambientMaterial(255);
    normalMaterial();
    directionalLight(255, 255, 255, 0, 0, -1);
    // rotateX(angle);
    // rotateY(angle * 1.3);
    // rotateZ(angle * 0.7);

    // fill(255);
    textureMode(NORMAL);
    texture(kitten);
    translate(-50, -50);

    // beginShape();
    //     vertex(0, 0, 0, 0, 0);
    //     vertex(100, 0, 0, 1, 0);
    //     vertex(100, 100, 0, 1, 1);
    //     vertex(0, 100, 0, 0, 1);
    // endShape(CLOSE);
    
    beginShape();
        vertex(0, 0, 0, 1, 0);
        vertex(100, 0, 0, 0, 0);
        vertex(100, 100, 0, 0, 1);
        vertex(0, 100, 0, 1, 1);
    endShape(CLOSE);
    
    // beginShape();
    //     vertex(0, 0, 0, 1, 0);
    //     vertex(100, 0, 0, 0, 0);
    //     vertex(100, 100, 0, 0, 0.5);
    //     vertex(0, 100, 0, 1, 0.5);
    // endShape(CLOSE);
    
    angle += 0.03;
}