Skip to content

Commit 5bb1caf

Browse files
author
Marco Stagni
committed
TASK added a setTexture method to Element, deprecated setTextureMap, added textures example
1 parent 615d769 commit 5bb1caf

13 files changed

Lines changed: 280 additions & 20 deletions

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
<li class='example' data-src='./physics'>Physics</li>
4343
<li class='example' data-src='./sound'>Clicky Sound</li>
4444
<li class='example' data-src='./trails'>Trails particles</li>
45+
<li class='example' data-src='./textures'>Textures</li>
4546
</ul>
4647
<iframe class='example-frame'></iframe>
4748

‎examples/textures/assets/Wood_025_ambientOcclusion.jpg‎

6.51 KB
Loading

‎examples/textures/assets/Wood_025_basecolor.jpg‎

242 KB
Loading

‎examples/textures/assets/Wood_025_height.png‎

206 KB
Loading

‎examples/textures/assets/Wood_025_normal.jpg‎

145 KB
Loading

‎examples/textures/assets/Wood_025_roughness.jpg‎

110 KB
Loading

‎examples/textures/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
6+
<link rel="stylesheet" href="../css/M.css" />
7+
<link rel="stylesheet" href="../css/app.css" />
8+
<script type="module" src="index.js"></script>
9+
</head>
10+
11+
<body>
12+
<div id="ui"></div>
13+
<div id="gameContainer" />
14+
</body>
15+
16+
</html>

‎examples/textures/index.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import {
2+
Router,
3+
store,
4+
Level,
5+
Box,
6+
Scene,
7+
Cube,
8+
Controls,
9+
Models,
10+
AmbientLight,
11+
PHYSICS_EVENTS,
12+
constants,
13+
Scripts,
14+
PALETTES,
15+
SunLight,
16+
HemisphereLight,
17+
Sky
18+
} from '../../dist/mage.js';
19+
20+
export default class Intro extends Level {
21+
22+
addAmbientLight() {
23+
const ambientLight = new AmbientLight({
24+
color: PALETTES.FRENCH_PALETTE.SPRAY,
25+
intensity: .5
26+
});
27+
28+
const hemisphereLight = new HemisphereLight({
29+
color: {
30+
sky: PALETTES.FRENCH_PALETTE.SQUASH_BLOSSOM,
31+
ground: PALETTES.FRENCH_PALETTE.REEF_ENCOUNTER
32+
},
33+
intensity: 1
34+
});
35+
36+
const sunLight = new SunLight({
37+
color: PALETTES.FRENCH_PALETTE.MELON_MELODY,
38+
intensity: 1,
39+
far: 20,
40+
mapSize: 2048
41+
});
42+
sunLight.setPosition({ y: 4, z: -3, x: -3 });
43+
sunLight.addHelper();
44+
}
45+
46+
createSky() {
47+
const sky = new Sky();
48+
const inclination = .1;
49+
const azimuth = .1;
50+
const distance = 100;
51+
52+
sky.setSun(
53+
inclination,
54+
azimuth,
55+
distance
56+
);
57+
}
58+
59+
onCreate() {
60+
Scene.getCamera().setPosition({ y: 10 });
61+
Controls.setOrbitControl();
62+
this.addAmbientLight();
63+
this.createSky();
64+
65+
const box = new Cube(5, 0xffffff);
66+
67+
box.setMaterialFromName(constants.MATERIALS.STANDARD, { roughness: .5, metalness: 0 });
68+
box.setTexture('woodMap', constants.TEXTURES.MAP);
69+
box.setTexture('woodAO', constants.TEXTURES.AO);
70+
box.setTexture('woodBump', constants.TEXTURES.BUMP);
71+
box.setTexture('woodNormal', constants.TEXTURES.NORMAL);
72+
box.setTexture('woodRoughness', constants.TEXTURES.ROUGHNESS);
73+
}
74+
}
75+
76+
const assets = {
77+
'/': {
78+
textures: {
79+
'woodMap': 'assets/Wood_025_basecolor.jpg',
80+
'woodAO': 'assets/Wood_025_ambientOcclusion.jpg',
81+
'woodBump': 'assets/Wood_025_height.png',
82+
'woodNormal': 'assets/Wood_025_normal.jpg',
83+
'woodRoughness': 'assets/Wood_025_roughness.jpg',
84+
}
85+
}
86+
}
87+
88+
const { SHADOW_TYPES } = constants;
89+
90+
const config = {
91+
screen: {
92+
h: window ? window.innerHeight : 800,
93+
w: window ? window.innerWidth : 600,
94+
ratio: window ? window.innerWidth / window.innerHeight : 600 / 800,
95+
frameRate: 60,
96+
alpha: true,
97+
},
98+
99+
lights: {
100+
shadows: true,
101+
shadowType: SHADOW_TYPES.HARD,
102+
textureAnisotropy: 32
103+
},
104+
105+
physics: {
106+
enabled: true,
107+
path: 'dist/ammo.js',
108+
gravity: { x: 0, y: -9.8, z: 0}
109+
},
110+
111+
tween: {
112+
enabled: false,
113+
},
114+
115+
camera: {
116+
fov: 75,
117+
near: 0.1,
118+
far: 3000000,
119+
},
120+
};
121+
122+
window.addEventListener('load', () => {
123+
store.createStore({}, {}, true);
124+
125+
Router.on('/', Intro);
126+
127+
Router.start(config, assets);
128+
});

‎src/entities/Element.js‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ import {
1515
ELEMENT_NOT_SET,
1616
ANIMATION_HANDLER_NOT_FOUND,
1717
ELEMENT_SET_COLOR_MISSING_COLOR,
18-
ELEMENT_NAME_NOT_PROVIDED
18+
ELEMENT_NAME_NOT_PROVIDED,
19+
ELEMENT_MATERIAL_NO_SUPPORT_FOR_TEXTURE,
20+
DEPRECATIONS
1921
} from '../lib/messages';
2022
import Images from '../images/Images';
2123
import AnimationHandler from './animations/AnimationHandler';
2224
import Config from '../core/config';
2325
import Scene from '../core/Scene';
24-
import { COLLISION_EVENT } from '../lib/constants';
26+
import { COLLISION_EVENT, MATERIALS, TEXTURES } from '../lib/constants';
2527
import Universe from '../core/Universe';
2628
import Physics from '../physics';
2729
import { DEFAULT_ANGULAR_VELOCITY, DEFAULT_LINEAR_VELOCITY } from '../physics/constants';
@@ -43,6 +45,7 @@ import {
4345
disposeGeometry,
4446
setUpLightsAndShadows
4547
} from '../lib/meshUtils';
48+
import { isTextureMapAllowedForMaterial } from '../materials/helpers';
4649

4750
const COLLIDER_TAG = 'collider';
4851
const COLLIDER_COLOR = 0xff0000;
@@ -62,12 +65,13 @@ export default class Element extends Entity {
6265
name = `default_${Math.random()}`
6366
} = options;
6467

65-
this.texture = undefined;
68+
this.textures = {};
6669
this.opacity = 1;
6770
this.options = {
6871
...options,
6972
name
7073
};
74+
7175
this.physicsOptions = DEFAULT_PHYSICS_OPTIONS;
7276
this.physicsState = {};
7377

@@ -79,9 +83,18 @@ export default class Element extends Entity {
7983
this.animationHandler = undefined;
8084
this.animations = [];
8185

86+
this.setMaterialType();
8287
this.setEntityType(ENTITY_TYPES.MESH);
8388
}
8489

90+
getMaterialType() {
91+
return this.materialType;
92+
}
93+
94+
setMaterialType(materialType = MATERIALS.BASIC) {
95+
this.materialType = materialType;
96+
}
97+
8598
addTag(tag) {
8699
super.addTag(tag);
87100

@@ -501,23 +514,37 @@ export default class Element extends Entity {
501514
}
502515
}
503516

517+
recordTexture(textureId, textureType) {
518+
this.textures[textureType] = textureId;
519+
}
520+
504521
setTextureMap = (textureId, options = {}) => {
522+
console.warn(DEPRECATIONS.ELEMENT_SET_TEXTURE_MAP);
523+
return this.setTexture(textureId, TEXTURES.MAP, options);
524+
}
525+
526+
setTexture(textureId, textureType = TEXTURES.MAP, options = {}) {
527+
if (!isTextureMapAllowedForMaterial(this.getMaterialType(), textureType)) {
528+
console.log(ELEMENT_MATERIAL_NO_SUPPORT_FOR_TEXTURE, textureType, this.getMaterialType());
529+
return;
530+
}
531+
505532
if (textureId) {
506533
const {
507534
repeat = { x: 1, y: 1 },
508535
wrap = RepeatWrapping
509536
} = options;
510537

538+
this.recordTexture(textureId, textureType);
539+
511540
const applyTextureTo = (element) => {
512541
const texture = Images.get(textureId);
513542

514-
this.texture = textureId;
515-
516543
texture.wrapS = wrap;
517544
texture.wrapT = wrap;
518545
texture.repeat.set(repeat.x, repeat.y);
519546

520-
element.material.map = texture;
547+
element.material[textureType] = texture;
521548
}
522549

523550
if (hasMaterial(this.getBody())) {
@@ -533,10 +560,12 @@ export default class Element extends Entity {
533560
}
534561

535562
setMaterialFromName(materialName, options = {}) {
563+
this.setMaterialType(materialName);
564+
536565
if (hasMaterial(this.getBody())) {
537566
changeMaterialByName(materialName, this.getBody(), options);
538567
} else {
539-
this.body.traverse(child => {
568+
this.getBody().traverse(child => {
540569
if (hasMaterial(child)) {
541570
changeMaterialByName(materialName, child, options);
542571
}
@@ -665,7 +694,7 @@ export default class Element extends Entity {
665694
...super.toJSON(),
666695
body: this.body.toJSON(),
667696
scripts: this.mapScriptsToJSON(),
668-
texture: this.texture,
697+
textures: this.textures,
669698
...this.options
670699
}
671700
}

‎src/lib/constants.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,31 @@ export const ORIGIN = new Vector3(0, 0, 0);
3030
export const ZERO_QUATERNION = new Quaternion().identity();
3131

3232
export const MATERIALS = {
33-
LAMBERT: 0,
34-
PHONG: 1,
35-
DEPTH: 2,
36-
STANDARD: 3,
37-
BASIC: 4,
38-
TOON: 5,
39-
THREE_TOON: 6
33+
BASIC: 'BASIC',
34+
LAMBERT: 'LAMBERT',
35+
PHONG: 'PHONG',
36+
DEPTH: 'DEPTH',
37+
STANDARD: 'STANDARD',
38+
TOON: 'TOOM',
39+
THREE_TOON: 'THREE_TOON'
4040
};
4141

42+
export const TEXTURES = {
43+
ALPHA: 'alphaMap',
44+
AO: 'aoMap',
45+
ENV: 'envMap',
46+
MAP: 'map',
47+
LIGHT: 'lightMap',
48+
SPECULAR: 'specularMap',
49+
EMISSIVE: 'emissiveMap',
50+
BUMP: 'bumpMap',
51+
DISPLACEMENT: 'displacementMap',
52+
NORMAL: 'normalMap',
53+
METALNESS: 'metalnessMap',
54+
ROUGHNESS: 'roughnessMap',
55+
GRADIENT: 'gradientMap'
56+
}
57+
4258
export const EFFECTS = {
4359
SEPIA: 'SEPIAEFFECT',
4460
HUE_SATURATION: 'HUESATURATIONEFFECT',

0 commit comments

Comments
 (0)