קורס תכנות משחקים – webgl – שיעור שלישי- ציור של אובייקט המטבע

בשיעור היום ניצור את האובייקט של המטבע בתלת מימד ונוסיף אותו היישר לתוך הסצנה במשחק שלנו. והיום סוף סוף נוכל לראות משהו בתוך הקאוונס ולהתחיל ולשחק עם הקוד וגם לראות בעין את השינויים מתרחשים. לפני כן, נעבור על השיעורים הקודמים לכל מי שצריך רענון.

להלן רצף השיעורים בקורס תכנות משחקים – webgl

• קורס תכנות משחקים – webgl – שיעור ראשון – הקמת הפרויקט
• קורס תכנות משחקים – webgl – שיעור שני- הסצנה והמצלמה

יצירת אובייקט תלת מימדי עם Threejs

אז כבר עשינו חלק נכבד מהעבודה ויצרנו בסיס שיכול להכיל אליו אלמנטים, עכשיו כל שנשאר זה לייצר אובייקטים ולדחוף אותם לתוך שטח המשחק שלנו (הקאנווס). בשביל לצייר אובייקטים תלת מימדיים עם Three יהיה עלינו להשתמש בכמה המאינסטנסים הבאים ( instance ) :

CylinderGeometry – בספריה של Three ישנה רשימה של צורות גאומטריות שאפשר לייצר . במקרה של המטבע הכי מתאים להשתמש בצילינדר.

MeshBasicMaterial – מגדיר את המאפייני הסגנון (כמו צבע למשל) של הצורה שנרצה לייצר.

Mesh – מאש הוא מה שמחבר בין הצורה הגיאומטרית לבין מאפייני הסגנון מאחד אותם לתוך מאש אחד.

כעת ניגש לקוד ונסביר עוד כמה דברים נוספים:

import React, { Component } from 'react';
import * as THREE from 'three';


class Coin extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        this.scene = new THREE.Scene();
        this.renderer = null;
        this.cylinder = null;
        this.canvasRef = React.createRef();

    }

    initialObj() {
        this.camera.position.z = 100;
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvasRef.current,
        });

        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        console.log(this.scene, this.camera);
    }

    componentDidMount() {
        this.initialObj();
        this.createShape();  
        this.renderer.render(this.scene, this.camera);        
    }

    createShape() {
        const geometry = new THREE.CylinderGeometry(10, 10, 1, 100);
        const material = new THREE.MeshBasicMaterial({
            color: 0xffff00
        })

        this.cylinder = new THREE.Mesh(geometry, material);
        this.cylinder.lookAt(0, 1 ,0);
        this.scene.add(this.cylinder);
    }
 

    render() {
        return (
            <canvas ref={this.canvasRef} className="canvasClass"></canvas>
        )
    }
}

export default Coin;

אז קודם כל וחשוב לציין שסוףסוף רואים משהו! זה אומנם לא נראה כמו אובייקט גרפי תלת מימדי אבל זו התחלת דרכנו אז נעבור קצת על הקוד ונמשיך הלאה:

createShape יצירת האובייקט הגרפי

המטודה שלנו בשורה 34 אחראית על יצירת האובייקט כפי שאפשר לראות יש לנו את הצורה cylinder שמגיעה היישר מ THREE . ומה שהיא מקבלת זה מספר פרמטרים : 10, 10 קובעים את הקוטר העיגול עליון וקוטר העיגול התחתון של הצילינדר. הערך 1 מגדיר את עוביו של הצילינדר ו100 מגדיר את מספר הצלעות. אם נבחר 6 במקום 100 נקבל צילינדר משושה. בשביל לתת תחושה של עיגול נצטרך להגדיר כמה שיותר קודקודים , לדעתי 100 זה מספיק.

בשימוש של material הגדרנו רק צבע בשלב זה (צבע צהוב).

ובהמשך יש כמה הגדרות מעניינות וגם שימושיות מאוד. כמו כן Mesh שמשתמשים בו כל פעם שרוצים לצייר עוד אובייקט גרפי. ואז ישר עכשיו אנחנו עושים שימוש ב Scene.add שמוסיף את האובייקט הגרפי שלנו לתוך הסצנה וזה כל הסיפור בעצם! סוף הפרק הראשון של הסיפור.

בטח ראיתם עוד משהו מעניין בשורה 41 . lookat היא מטודה של מאש , שמאפשר לנו לשנות את המבט על האובייקט לפני צירים (x,y,z) נכון לעכשיו הגדרתי את ציר הY להיות 1 וכך יודע האובייקט לשים את עצמו מול המצלמה ביחס לציר Y = 1 . ישנם עוד דרכים לסובב ולהזיז את האובייקטים הללו ו lookAt זוהי אפשרות . בהמשך נשחק עם זה קצת יותר כרגע בשביל התמונה הנוכחית זה עושה את העבודה. מה שאתם אמורים לראות על המסך שלכם זה תמונה כזו :

ואם אתם עוד לא רואים אז יש עוד כמה דברים שאי אפשר בלעדיהם . שורה 30, חייבים לקרוא למטודה של createShape כמובן. ואם עדיין לא ראיתם אז בשורה 18 , לא ציינתי את זה בשיעור הקודם אבל חשוב להגדיר איזה ערך לפוזיציה של המצלמה ביחס לציר הZ כי אחרת לא תראו כלום מכוון שנקודת המצלמה הדיפולטיבי הוא 0 שזה בתוך האובייקט ומתוכו לא תראו כלום , אז יש להרחיק מעט את המצלמה. אם תשחקו עם זה קצת תראו שהאובייקט גדל וקטן, הוא לא באמת משנה את הגודל שלו זו המצלמה שמתקרבת ומתרחקת ממנו.

סיכום שיעור שלישי webgl | תכנות משחקים

אז ראינו איך ליצור צורה דיי פשוטה, יש עוד הרבה צורות שאפשר להשתמש בהם שהם מובנות ויש אפשרות גם לייצר צורה ייחודית שזה כבר דורש הבנה יותר עמוקה של עבודה עם Mesh . בשלב הבא נראה איך משתמשים ב animate בשביל שהצורה תתחיל גם לזוז . נתראה בשיעור הבא ❤🐊

פוסטים קשורים:

קורס תכנות משחקים – webgl – שיעור רביעי- תנועה של האובייקט הגרפי במרחב קורס תכנות משחקים – webgl – שיעור שני- הסצנה והמצלמה קורס תכנות משחקים – webgl – שיעור ראשון – הקמת הפרויקט קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול.