src/app/three/materials.service.ts (82 lines of code) (raw):
/**
* Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { inject, Injectable } from '@angular/core';
import { CanvasTexture, MeshPhysicalMaterial, MeshStandardMaterial, RepeatWrapping, SRGBColorSpace, Vector2 } from 'three';
import { LoadersService } from './loaders.service';
import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture.js';
@Injectable( {
providedIn: 'root'
} )
export class MaterialsService {
private flakesNormalMap = new CanvasTexture( new FlakesTexture() );
private loadersService = inject( LoadersService );
constructor() { }
createPhongMaterial ( ops: any ) {
}
createLogoMaterial ( ops?: any ) {
let material = new MeshPhysicalMaterial( {
clearcoat: 1.0,
clearcoatRoughness: 0.1,
metalness: 0.9,
roughness: 0.5,
color: ops.color || 0x0000ff,
normalMap: this.flakesNormalMap,
normalScale: new Vector2( 0.15, 0.15 )
} );
return material;
}
createMeshPhysicalMaterial ( ops?: any ) {
let material = new MeshPhysicalMaterial( {
// clearcoat: 0,
clearcoatRoughness: 0.1,
// metalness: 0,
roughness: 0.9,
color: 0x54001b// Teal: 0x004a54,
// normalScale: new Vector2(0.15, 0.15)
} );
return material;
};
createFloorMaterial () {
const floorMat = new MeshStandardMaterial( {
roughness: 0.8,
color: 0xffffff,
metalness: 0.2,
bumpScale: 0.0005
} );
// Diffuse
this.loadersService.textureLoader.load( 'assets/textures/hardwood_diffuse.jpg', ( map ) => {
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 16;
map.repeat.set( 10, 24 );
map.colorSpace = SRGBColorSpace;
floorMat.map = map;
floorMat.needsUpdate = true;
},
undefined,
// onError callback
function ( err ) {
console.error( 'Bump texture failed to load.' );
}
);
this.loadersService.textureLoader.load( 'assets/textures/hardwood_bump.jpg', function ( map ) {
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.bumpMap = map;
floorMat.needsUpdate = true;
},
undefined,
// onError callback
function ( err ) {
console.error( 'Bump texture failed to load.' );
} );
this.loadersService.textureLoader.load( 'assets/textures/hardwood_roughness.jpg', function ( map ) {
map.wrapS = RepeatWrapping;
map.wrapT = RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 10, 24 );
floorMat.roughnessMap = map;
floorMat.needsUpdate = true;
},
undefined,
// onError callback
function ( err ) {
console.error( 'Bump texture failed to load.' );
}
);
return floorMat;
}
}