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

import React, { Component } from 'react';
import * as THREE from 'three';
import side1 from './side1.png';
import side2 from './side2.png';

class Coin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            textureSide1: new THREE.TextureLoader().load(side1),
            textureSide2: new THREE.TextureLoader().load(side2)
        };
        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 = 200;
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvasRef.current,
            alpha: true
        });

        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }

    componentDidMount() {
        this.initialObj();
        this.addLights();
        this.createShape();
        
    }
    componentDidUpdate(){
        if(this.props.play)
        this.animate();
    }
    
    createShape() {
        const geometry = new THREE.CylinderGeometry(10, 10, 1, 100);
        const material = new THREE.MeshStandardMaterial({
            map: this.state.textureSide1,
            color: 0xFFD700,
            metalness: 0.3,
            roughness: 0.3
        })

        this.cylinder = new THREE.Mesh(geometry, material);
        this.cylinder.rotation.x = Math.PI / 2;
        this.cylinder.rotation.y = Math.PI / 2;
        this.scene.add(this.cylinder);
    }

    addLights() {
        this.scene.add(new THREE.AmbientLight(0xffffff))

        // Left point light
        const pointLightLeft = new THREE.PointLight(0xff4422, 1)
        pointLightLeft.position.set(-20,-10,10)
        this.scene.add(pointLightLeft)
      
        // Right point light
        const pointLightRight = new THREE.PointLight(0x44ff88, 1)
        pointLightRight.position.set(20,10,10)
        this.scene.add(pointLightRight)
      
        // Top point light
        const pointLightTop = new THREE.PointLight(0xdd3311, 1)
        pointLightTop.position.set(0,3,2)
        this.scene.add(pointLightTop);
    }

    animate() {
        let velocity = 2;
        let frames = 0;
        let limit = this.props.rand;
        let spinsCount = 0;
        const spininngCoin = setInterval(() => {
            frames++;
            if (frames % limit === 0) {
                clearInterval(spininngCoin);
                this.props.setGame(false);
                if (spinsCount % 2) {
                    this.cylinder.rotation.x = Math.PI / 2 + Math.PI;
                    this.props.result('bitcoin');
                } else {
                    this.cylinder.rotation.x = Math.PI / 2;
                    this.props.result('codcodile');

                }
            }
            if (frames < limit / 2) {
                this.camera.position.z -= velocity;
                velocity = velocity/1.015;
            } else {
                this.camera.position.z += velocity;
                velocity = velocity*1.015;
            }
            spinsCount = ~~(this.cylinder.rotation.x / Math.PI);
            if (spinsCount % 2) {
                this.cylinder.material.map = this.state.textureSide1;
            } else {
                this.cylinder.material.map = this.state.textureSide2;
            }
            this.cylinder.rotation.x += 0.025 * Math.PI;
            this.renderer.render(this.scene, this.camera);
        });

    }

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

export default Coin;