What's new

Help Graphics three js

F

FearNoLimits

Honorary Poster
Established
Joined
Jun 24, 2018
Posts
211
Solutions
1
Reaction
165
Points
177
Pa help po para sa final project
Gagawa kami ng simple house
Need lang baguhin Ang var edge at var vertices





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube</title>
<style>
body{
margin: 0;
}
canvas{
display: block;
}

</style>

</head>
<body>
<script>

//DITO AND MGA CONSTANT
const COLOR_BG = "black";
const COLOR_CUBE = "green"
const SPEED_X = 0.05; // REVOLUTION PER SECOND
const SPEED_Y = 0.05;
const SPEED_Z = 0.05;
const POINT3D = function(x,y,z) {this.x = x; this.y = y; this.z = z};// DITO NAMAN ANG 3D SPACE

//setup ang canvas at ang context dito nag-iddrawing
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d")

//dimension
var h = document.documentElement.clientHeight;
var w = document.documentElement.clientWidth;

canvas.height = h;
canvas.width = w;

//color at lines
ctx.fillStyle = COLOR_BG;
ctx.strokeStyle = COLOR_CUBE;
ctx.lineWidth = w / 100; //ito ang thickness ng line ng cube
ctx.lineCap = "round";

//parameter para sa cube.
var cx= w/2; //
var cy= h/2;
var cz=0;
var size = h/4;
var vertices = [
new POINT3D(cx-size, cy-size, cz-size), // dito ang vertices ng mga corners ng cube
new POINT3D(cx+size, cy-size, cz-size),
new POINT3D(cx+size, cy+size, cz-size),
new POINT3D(cx-size, cy+size, cz-size),
new POINT3D(cx-size, cy-size, cz+size),
new POINT3D(cx+size, cy-size, cz+size),
new POINT3D(cx+size, cy+size, cz+size),
new POINT3D(cx-size, cy+size, cz+size)
];
var edges = [ //array points sa vertex
[0,1],[1,2],[2,3],[3,0], //back face
[4,5],[5,6],[6,7],[7,4], //front face
[0,4],[1,5],[2,6],[3,7] //connecting sides
];


//set up ang animation para gumalaw ang cube
var timeDelta = 0; // time different ng current frame at previous frame
var timeLast = 0; // time of the last frame
requestAnimationFrame(loop); //para tuloy tuloy and animation

//gawa ng function para sa loop
function loop(timeNow)
{
//calculate the time difference
timeDelta = timeNow - timeLast;
timeLast = timeNow;

//para sa background na mafill ang canvas
ctx.fillRect(0,0,w,h);

//rotate ang cube sa kanyang z axis
let angle = timeDelta * 0.001 * SPEED_Z * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dy = v.y - cy;
let x = dx * Math.cos(angle) - dy * Math.sin(angle);
let y = dx * Math.sin(angle) + dy * Math.cos(angle);
v.x = x + cx;
v.y = y + cy;
}
//rotate sa x axis
angle = timeDelta * 0.001 * SPEED_X * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dy = v.y - cy;
let dz = v.z - cz;
let y = dy * Math.cos(angle) - dz * Math.sin(angle);
let z = dy * Math.sin(angle) + dz * Math.cos(angle);
v.y = y + cy;
v.z = z + cz;
}
//rotate in y axis
angle = timeDelta * 0.001 * SPEED_Y * Math.PI * 2; // ang math.pi ang 360 angle pero sa javascript kailangan ay radian
for(let v of vertices){
let dx = v.x - cx;
let dz = v.z - cz;
let x = dz * Math.sin(angle) + dx * Math.cos(angle);
let z = dz * Math.cos(angle) - dx * Math.sin(angle);
v.x = x + cx;
v.z = z + cz;
}

//draw ang bawat edge
for(let edge of edges){ //for loop ang bawat edge sa edges array
ctx.beginPath();
ctx.moveTo(vertices[edge[0]].x, vertices[edge[0]].y);
ctx.lineTo(vertices[edge[1]].x, vertices[edge[1]].y);
ctx.stroke();
}

//tawagin ang susunod na frame
requestAnimationFrame(loop);

}

</script>
</body>
</html>
 
Last edited:
Para baguhin ang var edge at var vertices, kailangan mo i-update ang mga values ng edges at vertices arrays.

Para sa edges array, maaari mong baguhin ang mga connections ng mga vertices para bumuo ng ibang mga shape o figure. Halimbawa, kung gusto mong gawing isang piramide ang cube, maaari mong baguhin ang edges array na ito:

JavaScript: 
var edges = [
  [0,1],[1,2],[2,3],[3,0], //back face
  [0,4],[1,4],[2,4],[3,4] //connecting sides
];

Para sa vertices array, maaari mong baguhin ang mga coordinates ng mga vertices para iba ang shape ng cube. Halimbawa, kung gusto mong gawing mas malaki ang cube, maaari mong gamitin ang mga sumusunod na values:

JavaScript: 
var size = h/3; // Ang size ng cube ay mas malaki kaysa dati
var vertices = [
  new POINT3D(cx-size, cy-size, cz-size), // dito ang vertices ng mga corners ng cube
  new POINT3D(cx+size, cy-size, cz-size),
  new POINT3D(cx+size, cy+size, cz-size),
  new POINT3D(cx-size, cy+size, cz-size),
  new POINT3D(cx-size, cy-size, cz+size),
  new POINT3D(cx+size, cy-size, cz+size),
  new POINT3D(cx+size, cy+size, cz+size),
  new POINT3D(cx-size, cy+size, cz+size)
];

Ito ay ilan lamang sa mga posible na pagbabago na maaari mong gawin sa edges at vertices arrays. Pumili ng mga values na angkop sa iyong layunin na gumawa ng isang simple house.
 

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 1
    Replies
  • 128
    Views
  • 2
    Participants
Last reply from:
🤖

New Topics

Popular On This Forum

Online statistics

Members online
441
Guests online
5,389
Total visitors
5,830
Back
Top