Home

Index

How to use the MeshStandardMaterial function from three

Find comprehensive JavaScript three.MeshStandardMaterial code examples handpicked from public code repositorys.

The Three.js MeshStandardMaterial is a physically-based material that simulates metallic and non-metallic surfaces with reflections, roughness, and more.

app.js

28
29
30
31
32
33
34
35
36
37
let scene = new THREE.Scene();
let camera = window.getViewMatrix ? new HolographicCamera() : new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
let raycaster = new THREE.Raycaster();
let clock = new THREE.Clock();
let loader = new THREE.TextureLoader();
let material = new THREE.MeshStandardMaterial({ vertexColors: THREE.VertexColors, map: new THREE.DataTexture(new Uint8Array(3).fill(255), 1, 1, THREE.RGBFormat) });

let ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
let directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
let pointLight = new THREE.PointLight(0xFFFFFF, 0.5);

loader.js

GitHub: InSimo/three-gltf-viewer

98
99
100
101
102
103
104
105
106
107

loader.load(url, (content) => {
  console.log(content);
  if (content instanceof THREE.BufferGeometry) { // geometry loader -> create mesh with default material
    var geometry = content;
    var material = new THREE.MeshStandardMaterial();
    content = new THREE.Mesh( geometry, material );
    content.name = rootName;
    console.log(content);
  }

460

How does three.MeshStandardMaterial work?

three.MeshStandardMaterial is a class in the Three.js library that defines the material of a mesh by specifying its visual properties like color, metalness, roughness, etc. It is based on the physically-based rendering (PBR) model which attempts to create realistic lighting of a 3D object by simulating how light interacts with its surface. The MeshStandardMaterial class provides a range of settings and options to customize the appearance of the material, including parameters for reflectivity, normal and bump mapping, emissive color, and more.

Gamepad.js

GitHub: MozillaReality/puzzle-rain

46
47
48
49
50
51
52
53
54
55
this.myName = 'hand' + this.side;
var self = this;
this.mesh.load('models/hand' + this.side + '.json', function () {
  Events.emit('gamepad' + self.side + 'Added');
  Events.on('updateScene', self.update.bind(self));
  self.mesh.material = new THREE.MeshStandardMaterial({
    color: settings.offColor,
    roughness: 0.5,
    metalness: 0,
    emissive: settings.offColor,

index.js

GitHub: ASSERT-KTH/ci-hackathon

223
224
225
226
227
228
229
230
231
232
bulbLight.power = 0.25;
bulbLight.decay = 1;
bulbLight.exposure=0.5


var bulbMat = new THREE.MeshStandardMaterial({
    emissive: color,
    emissiveIntensity: 2,
    color: color,
    //metalness: 0.9,

+ 2 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
import * as THREE from "three";

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff, // white
  metalness: 0.5,
  roughness: 0.5,
  map: new THREE.TextureLoader().load("path/to/texture.jpg"),
  normalMap: new THREE.TextureLoader().load("path/to/normal-map.jpg"),
});

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);

In this example, a MeshStandardMaterial is created with the specified options, including a color, metalness, roughness, and textures. This material is then applied to a BoxGeometry to create a Mesh object.

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
 * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#default-material
 */
function createDefaultMaterial() {
  defaultMaterial =
    defaultMaterial ||
    new THREE.MeshStandardMaterial({
      color: 0xffffff,
      emissive: 0x000000,
      metalness: 1,
      roughness: 1,

+ 29 other calls in file

fashionview.js

GitHub: audunsh/evince

374
375
376
377
378
379
380
381
382



let baseGeometry = new THREE.SphereBufferGeometry(1.0, 30, 20);

let material = new THREE.MeshStandardMaterial( );

material.roughness = 0.2;
material.metalness = 0.2;

+ 2 other calls in file

denseview.js

GitHub: audunsh/evince

128
129
130
131
132
133
134
135
136



//let baseGeometry = new THREE.SphereBufferGeometry(1.0, 20, 10);
//let material = new THREE.MeshStandardMaterial( );
//let material = new THREE.MeshStandardMaterial({ color: 0x2B2B2B });
//material.roughness = 0.2;
//material.metalness = 0.2;

+ 5 other calls in file

spotlightview.js

GitHub: audunsh/evince

411
412
413
414
415
416
417
418
419
420
let pointX = new THREE.Vector3(pX[0], pX[1], pX[2]);
let pointY = new THREE.Vector3(pY[0], pY[1], pY[2]);

// edge from X to Y
var direction = new THREE.Vector3().subVectors(pointY, pointX);
let material = new THREE.MeshStandardMaterial({ color: 0x2B2B2B });
// Make the geometry (of "direction" length)
material.roughness = 0.2;
material.metalness = 0.2;
//var geometry = new THREE.CylinderGeometry(.4, 0.4, direction.length(), 6, 4, true);

+ 7 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

3328
3329
3330
3331
3332
3333
3334
3335
3336
3337
let pointX = new THREE.Vector3(pX[0], pX[1], pX[2]);
let pointY = new THREE.Vector3(pY[0], pY[1], pY[2]);

// edge from X to Y
var direction = new THREE.Vector3().subVectors(pointY, pointX);
let material = new THREE.MeshStandardMaterial({ color: 0x5B5B5B });
// Make the geometry (of "direction" length)
material.roughness = 0.2;
material.metalness = 0.2;
var geometry = new THREE.CylinderGeometry(.4, 0.4, direction.length(), 6, 4, true);

+ 35 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910


function createDefaultMaterial( cache ) {


    if ( cache[ 'DefaultMaterial' ] === undefined ) {


        cache[ 'DefaultMaterial' ] = new THREE.MeshStandardMaterial( {
            color: 0xFFFFFF,
            emissive: 0x000000,
            metalness: 1,
            roughness: 1,

+ 3 other calls in file

coins.js

GitHub: aMoniker/coins-visualization

2
3
4
5
6
7
8
9
10
11
const THREE = require('three');

class Coins {
    constructor() {
        this.setRadius(3); // default radius
        this.coinMaterial = new THREE.MeshStandardMaterial({
            color: 0xd4af37,
            roughness: 0.5,
            metalness: 1.0,
        });

table.js

GitHub: JesungKoo/glb2usdz

69
70
71
72
73
74
75
76
77
78
const topMat = new THREE.MeshStandardMaterial( { color: topColor } );
const top = new THREE.Mesh( topGeo, topMat );
top.position.set(0, height + topT/2, 0);

const legGeo = new THREE.BoxBufferGeometry(legT, height, legT);
const legMat = new THREE.MeshStandardMaterial( {color: legColor} );
const legHeight = height/2;
const leg1 = new THREE.Mesh(legGeo, legMat);
const leg2 = new THREE.Mesh(legGeo, legMat);
const leg3 = new THREE.Mesh(legGeo, legMat);

+ 3 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
    MASK: 'MASK',
    BLEND: 'BLEND'
};
function createDefaultMaterial(cache) {
    if (cache['DefaultMaterial'] === undefined) {
        cache['DefaultMaterial'] = new three.MeshStandardMaterial({
            color: 0xFFFFFF,
            emissive: 0x000000,
            metalness: 1,
            roughness: 1,

ThreeCtrl.js

GitHub: amatelus/paintcoin

67
68
69
70
71
72
73
74
75
76
  'posz.jpg',
  'negz.jpg',
]);
textureCube.minFilter = THREE.LinearFilter;

this.material = new THREE.MeshStandardMaterial({
  roughness: 0.8,
  metalness: 1,
  color: 16761685,
  envMap: textureCube,

+ 5 other calls in file

Hand.js

GitHub: kenjiSpecial/portfolio-2017

20
21
22
23
24
25
26
27
28
29
    this._createHand();
    this.model.addEventListener('stateChange', this._onStateChange.bind(this));
}
_createHand(){

    let mat = new THREE.MeshStandardMaterial({
        color : 0xccccbb,
        // color : 0xff,
        roughness : 0,
        metalness : 0,

vox-to-gltf.js

GitHub: birdinforest/vox-to-gltf

61
62
63
64
65
66
67
68
69
70
geometry.addAttribute('position', new BufferAttribute(new Float32Array(vertices), 3));
geometry.addAttribute('normal', new BufferAttribute(new Float32Array(normals), 3));
geometry.addAttribute('color', new BufferAttribute(new Float32Array(flattenedColors), 3) );
geometry.setIndex(new BufferAttribute(new Uint32Array(indices), 1));

let material = new MeshStandardMaterial({ color: '#ffffff', roughness: 1.0, metalness: 1.0 });
let mesh = new Mesh(geometry, material);
let exporter = new THREE.GLTFExporter();

exporter.parse(mesh, (gltfData) => {

webgl_main.js

GitHub: utunga/deeppbr.ai

39
40
41
42
43
44
45
46
47
48
    dispBias: -0.09, // -0.428408,
    normalScale: -1, // -0.7,
};

var material = new THREE.MeshStandardMaterial();
var materialSwap = new THREE.MeshStandardMaterial();

initGui();
init();
animate();

+ 7 other calls in file

visualizer.js

GitHub: ASLS-org/studio

215
216
217
218
219
220
221
222
223
224
gridHelper.position.setZ(-.3)
SceneManager.add(gridHelper)

const axesHelper = new THREE.AxesHelper(2);

const checkerMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  polygonOffset: true,
  polygonOffsetUnits: 2,
  polygonOffsetFactor: 1,

+ 7 other calls in file

_web3d.js

GitHub: truongvithien/threed

574
575
576
577
578
579
580
581
582
583
    roughnessMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.outfit_texture.roughness),
    aoMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.outfit_texture.ambient_occlusion),
    emissiveMap: new THREE.TextureLoader().load(settings.smt_01.dir_texture + settings.smt_01.outfit_texture.emissive) 
}

var skinTexture = new THREE.MeshStandardMaterial({
    ...skin_texture,
    // aoMap: null,
    aoMapIntensity: .1,
});

+ 17 other calls in file

moving_head.js

GitHub: ASLS-org/studio

296
297
298
299
300
301
302
303
304
305
306
    gl_FragColor = vec4(rgbColor*computeFog(intensity)*vIntensity,1.0);

}
`;


const MODEL_MATERIAL = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  transparent: true,
  flatShading: false,
  side: THREE.DoubleSide,

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About