tanks/3d_objects.js at master · pelid/tanks · 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
// //create a group and add the two cubes
// //These cubes can now be rotated / scaled etc as a group
function createTank3D({color=0x00aa00}={}){
  let tank = new THREE.Group();

  let geometry = new THREE.BoxGeometry( 1, 0.9, 0.3 );
  let material = new THREE.MeshPhongMaterial({color: color, vertexColors: THREE.FaceColors});
  let body = new THREE.Mesh( geometry, material );
  body.position.z = 0.1
  body.castShadow = true;
  body.receiveShadow = true;
  tank.add( body );

  let sphere = new THREE.SphereGeometry(0.3, 8, 4, 0, 6.3, 0, 1.3); // https://threejs.org/docs/#api/geometries/SphereGeometry
  let turret = new THREE.Mesh( sphere, new THREE.MeshPhongMaterial({color: color}) );
  turret.rotation.x = Math.PI / 2
  turret.position.z = 0.2
  turret.castShadow = true;
  turret.receiveShadow = true;
  tank.add( turret );

  let geometry2 = new THREE.BoxGeometry( 1, 0.1, 0.1 );
  let material2 = new THREE.MeshPhongMaterial({color: color, vertexColors: THREE.FaceColors});
  let gun = new THREE.Mesh( geometry2, material2 );
  gun.position.x = -0.5
  gun.position.z = 0.3
  gun.castShadow = true;
  gun.receiveShadow = true;
  tank.add( gun );

  let geometry3 = new THREE.BoxGeometry( 1.15, 0.2, 0.3 );
  let material3 = new THREE.MeshPhongMaterial({color: 0xaaaaaa, vertexColors: THREE.FaceColors});
  let truck1 = new THREE.Mesh( geometry3, material3 );
  truck1.position.y = 0.4
  tank.add( truck1 );

  let geometry4 = new THREE.BoxGeometry( 1.15, 0.2, 0.3 );
  let material4 = new THREE.MeshLambertMaterial({color: 0xaaaaaa, vertexColors: THREE.FaceColors});
  let truck2 = new THREE.Mesh( geometry4, material4 );
  truck2.position.y = -0.4
  tank.add( truck2 );
  return tank
}

function createBattleField3D(borders, padding=[0, 0, 0, 0]){
  let [pTop, pRight, pBottom, pLeft] = padding

  let {leftX, rightX, topY, bottomY} = borders
  leftX -= pLeft
  rightX += pRight
  topY += pTop
  bottomY -= pBottom

  let borderMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
  let borderGeometry = new THREE.Geometry();

  borderGeometry.vertices.push(new THREE.Vector3( leftX, topY, 0) );
  borderGeometry.vertices.push(new THREE.Vector3( rightX, topY, 0) );
  borderGeometry.vertices.push(new THREE.Vector3( rightX, bottomY, 0) );
  borderGeometry.vertices.push(new THREE.Vector3( leftX, bottomY, 0) );
  borderGeometry.vertices.push(new THREE.Vector3( leftX, topY, 0) );
  let border = new THREE.Line( borderGeometry, borderMaterial );

  return border
}


function createShot(){
  let geometry2 = new THREE.BoxGeometry( 0.7, 0.1, 0.1 );
  let material2 = new THREE.MeshPhongMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
  let shot = new THREE.Mesh( geometry2, material2 );
  shot.position.x = 0
  shot.position.z = 0
  shot.castShadow = true;
  shot.receiveShadow = true;
  return shot
}

function createSphere({position={x:0, y:0, z:0}, color=0xaaaaaa, radius=1}={}){
  let sphere = new THREE.SphereGeometry(radius, 8, 4, 0, 6.3, 0, Math.PI); // https://threejs.org/docs/#api/geometries/SphereGeometry
  let sphereMesh = new THREE.Mesh( sphere, new THREE.MeshPhongMaterial({color: color}) );
  sphereMesh.castShadow = true;
  sphereMesh.receiveShadow = true;
  Object.assign(sphereMesh.position, position)
  return sphereMesh
}