3d_pong/test.html at master · useless-code/3d_pong · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html>
<head>
<title> 3d-Pong </title>

</head>
<body>

<script src="three.min.js"></script>
<script>

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

      function crear_plano(color, w, h){
        var w = w || 300;
        var h = h || 300;
            var material = new THREE.MeshLambertMaterial( { color: color, wireframe: false } );
            var plano = new THREE.PlaneGeometry(w, h, 2, 2)
            var plano_malla = new THREE.Mesh( plano, material );
            plano_malla.material.side = THREE.DoubleSide;
            scene.add(plano_malla);
            return plano_malla;
        };

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;
        camera.position.y = 500;
//        camara.lookAt(0,0,0);

        scene = new THREE.Scene();

        luz = new THREE.PointLight(0xffffff);

        luz.position.x = 100;
        luz.position.y = 10;
        luz.position.z = 150;

        scene.add(luz);
        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        cubo = new THREE.SphereGeometry(100, 8, 8);
        material_2 = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );

        rotaciones = ['x', 'x', 'y', 'y' ];
        planos = [];
        for(var i=0; i < rotaciones.length; i++) {
            var plano_malla = crear_plano(0x00fff0);
            plano_malla.axis_to_rotate = rotaciones[i];
            plano_malla.rotation_sign = (i%2) || -1;
            planos.push(plano_malla);
          };

          fondo = crear_plano(0xffffff, 1000, 1000);
          fondo.position.z = - 500;
          fondo.rotation.y = Math.PI / 4;

        mesh = new THREE.Mesh( geometry, material );
        malla_cubo = new THREE.Mesh( cubo, material_2 );
        scene.add( mesh );
        scene.add( malla_cubo );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {

      // note: three.js includes requestAnimationFrame shim
      requestAnimationFrame( animate );

      mesh.rotation.x += 0.01;

      mesh.rotation.y += 0.02;
      malla_cubo.rotation.x += 0.02;
      malla_cubo.rotation.y += 0.04;

      for (var i=0; i <planos.length; i++){
        var plano = planos[i];
        plano.rotation[plano.axis_to_rotate] += plano.rotation_sign * 0.005 * (i + 1);

      };
      if (camera.position.z == 500){
        camera.go_in = false;
     } else if (camera.position.z == 1000){
        camera.go_in = true;
      }

      if (camera.go_in == true) {
       // camera.position.z -= 1;
        mesh.position.x += 1;
        malla_cubo.position.x -= 1;
        }else{
       // camera.position.z += 1;
        mesh.position.x -= 1;
        malla_cubo.position.x += 1;
      };

      renderer.render( scene, camera );

    }

</script>
</body>
</html>