/
ExSpaceFighter.js
122 lines (109 loc) · 3.64 KB
/
ExSpaceFighter.js
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
114
115
116
117
118
119
120
121
122
import React from 'react'
import THREE from 'three'
import MTLLoader from '../threex/loaders/MTLLoader'
import OBJLoader from '../threex/loaders/OBJLoader'
import { Object3D, Mesh } from '../src'
// Copyright (c) 2013 Jerome Etienne
// https://github.com/jeromeetienne/threex.spaceships
export default class ExSpaceFighter extends Object3D {
constructor (...args) {
super(...args)
this.state = { body: null }
// todo: better code
var mtlLoader = new MTLLoader();
mtlLoader.setBaseUrl( 'SpaceFighter03/' )
mtlLoader.setPath( 'SpaceFighter03/' )
mtlLoader.load( 'SpaceFighter03.mtl', ( materials ) => {
materials.preload();
var objLoader = new OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'SpaceFighter03/' )
objLoader.load( 'SpaceFighter03.obj', ( group ) => {
const body = group.children[0]
body.material.color.set(0xffffff)
this.setState({ body })
})
})
const detonation = this.generateDetonation()
this.detonation1 = detonation
this.detonation2 = detonation.clone()
const shoot = this.generateShoot()
this.shoot1 = shoot
this.shoot2 = shoot.clone()
}
render () {
const { shoot1, shoot2, detonation1, detonation2 } = this
const { body } = this.state
if (!body) return null
return (<div>
<Mesh obj={body} />
<Mesh obj={detonation1} position={{ x: 5, z: 0.8 }} />
<Mesh obj={detonation2} position={{ x: -5, z: 0.8 }} />
<Mesh obj={shoot1} position={{ x: 5, z: 2.6 }} />
<Mesh obj={shoot2} position={{ x: -5, z: 2.6 }} />
</div>)
}
generateDetonation () {
var texture = new THREE.TextureLoader()
.load(require('./SpaceFighter03/lensflare0_alpha.png'))
var geometry = new THREE.PlaneGeometry(1, 1)
var material = new THREE.MeshBasicMaterial({
color: 0x00ffff,
map: texture,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
opacity: 2,
depthWrite: false,
transparent: true,
})
var detonation = new THREE.Mesh(geometry, material)
detonation.scale.multiplyScalar(4)
return detonation
}
generateShoot () {
var canvas = this.generateShootCanvas();
var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial({
color: 0xffaacc,
map: texture,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
depthWrite: false,
transparent: true,
})
var container = new THREE.Object3D()
container.rotateY(Math.PI / 2)
container.scale.multiplyScalar(4)
var nPlanes = 4;
for (var i = 0; i < nPlanes; i++) {
var geometry = new THREE.PlaneGeometry(1, 1)
var mesh = new THREE.Mesh(geometry, material)
mesh.material = material
mesh.rotateX(i * Math.PI / nPlanes)
container.add(mesh)
}
return container
}
generateShootCanvas () {
// init canvas
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( '2d' );
canvas.width = 16;
canvas.height = 64;
// set gradient
var gradient = context.createRadialGradient(
canvas.width / 2, canvas.height / 2, 0,
canvas.width / 2, canvas.height / 2, canvas.width / 2
);
gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
gradient.addColorStop( 0.5, 'rgba(192,192,192,1)' );
gradient.addColorStop( 0.8, 'rgba(128,128,128,0.7)' );
gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
// fill the rectangle
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
// return the just built canvas
return canvas;
}
}