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

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);
    }

    componentDidMount() {
        this.initialObj();
        this.createShape();  
        this.animate();     
    }

    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);
    }
 
      animate() {
        const spininngCoin = setInterval(() => {
        this.cylinder.rotation.z += 0.01;
            this.renderer.render(this.scene, this.camera);
        });
    }

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

export default Coin;