Home

Index

How to use the MeshPhongMaterial function from three

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

three.MeshPhongMaterial is a class in the Three.js library that defines a material for a 3D mesh that reflects light in a phong shading model.

geo-three.cjs

515
516
517
518
519
520
521
522
523
524
525
        }
    }
}


class MapHeightNode extends MapNode {
    constructor(parentNode = null, mapView = null, location = QuadTreePosition.root, level = 0, x = 0, y = 0, geometry = MapHeightNode.geometry, material = new three.MeshPhongMaterial({ wireframe: false, color: 0xffffff })) {
        super(parentNode, mapView, location, level, x, y, geometry, material);
        this.heightLoaded = false;
        this.textureLoaded = false;
        this.geometrySize = 16;

468

+ 5 other calls in file

README.md?plain=1

GitHub: StrandedKitty/three-csm

48
49
50
51
52
53
54
55
56
57
        lightDirection: new THREE.Vector3(1, -1, 1).normalize(),
        camera: camera,
        parent: scene
});

let material = new THREE.MeshPhongMaterial(); // works with Phong and Standard materials
csm.setupMaterial(material); // must be called to pass all CSM-related uniforms to the shader

let mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(), material);
mesh.castShadow = true;

191

How does three.MeshPhongMaterial work?

The three.MeshPhongMaterial class is a part of the Three.js library, which is a JavaScript library that provides a framework for creating 3D graphics in a web browser. When you create a 3D mesh in Three.js, you typically apply a material to the mesh to define its appearance. The three.MeshPhongMaterial class is one of several material classes provided by Three.js that define different types of material properties. The three.MeshPhongMaterial class defines a material for a 3D mesh that reflects light in a Phong shading model. This means that the material simulates the way that light reflects off a surface in the real world, based on the angle between the surface normal and the direction of the light. The three.MeshPhongMaterial class provides various properties that you can use to configure the appearance of the material, such as its color, emissive color, specular color, shininess, and more. You can also set the map property to apply a texture to the material, or use the envMap property to simulate reflection and refraction based on an environment map. Once you have created a three.MeshPhongMaterial object, you can apply it to a 3D mesh using the material property of the mesh object. Overall, the three.MeshPhongMaterial class provides a powerful way to define the appearance of a 3D mesh in Three.js using a phong shading model.

main.js

GitHub: kentywang/Agamari

215
216
217
218
219
220
221
222
223
}

function createLevel(){
 // planet creation
  var planet_geometry = new THREE.TetrahedronBufferGeometry( 500, 4 );
  var planet_material = new THREE.MeshPhongMaterial( { color: someColors['red'], shading: THREE.FlatShading});
  var planet = new THREE.Mesh( planet_geometry, planet_material );

  planet.receiveShadow = true;

+ 15 other calls in file

renderer.js

GitHub: dennisss/tansa

89
90
91
92
93
94
95
96
97
98
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add( light );


var matFloor = new THREE.MeshPhongMaterial({ color: 0x444444, shininess: 1 });
var geoFloor = new THREE.BoxGeometry( 16, 9, 0.001 );
var mshFloor = new THREE.Mesh( geoFloor, matFloor );
mshFloor.position.set(0, 0, -0.005);
mshFloor.receiveShadow = true;

Ai Example

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
const scene = new THREE.Scene();

// Create a phong material
const material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0xffffff,
  shininess: 100,
});

// Create a box mesh with the phong material
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Create a point light to illuminate the mesh
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 5);
scene.add(light);

// Create a camera and renderer
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Render the scene
function render() {
  requestAnimationFrame(render);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
render();

In this example, we first create a new THREE.Scene object to hold our 3D mesh and light. We then create a THREE.MeshPhongMaterial object and pass in an options object that sets the color of the material to red, the specular color to white, and the shininess to 100. We use the THREE.BoxGeometry class to create a cube mesh geometry, and the THREE.Mesh class to create a new mesh object with the geometry and the phong material. We add the mesh object to the scene using the add method of the scene object. We then create a THREE.PointLight object to illuminate the mesh and add it to the scene. We create a THREE.PerspectiveCamera object and a THREE.WebGLRenderer object, and add the renderer's DOM element to the HTML body. We also set the camera's position to (0, 0, 5) so that it is positioned in front of the mesh. Finally, we define a render function that animates the mesh's rotation and renders the scene using the THREE.WebGLRenderer object. We call the requestAnimationFrame method to continuously update the scene and mesh rotation. Overall, this example demonstrates how to create a 3D mesh with a phong material in Three.js, and how to add it to a scene and render it using a camera and renderer.

player.js

GitHub: kentywang/Agamari

43
44
45
46
47
48
49
50
51
52
  '#547980'];
let randomColor = aFewColors[~~(Math.random() * aFewColors.length)];

// THREE
geometry = new THREE.TetrahedronBufferGeometry( 10, 2 );
material = new THREE.MeshPhongMaterial({ color: randomColor,
                                         shading: THREE.FlatShading });
mesh = new THREE.Mesh( geometry, material );

// Cannon

+ 5 other calls in file

index.js

GitHub: avin/generative

84
85
86
87
88
89
90
91
92
    color: 0x30404d,
  });
}

function createHatMaterial() {
  return new THREE.MeshPhongMaterial({
    color: 0xf5498b,
  });
}

+ 5 other calls in file

util.js

GitHub: shinseed/BIMServer-NodeJs

128
129
130
131
132
133
134
135
136
137
this.isSelectColor = false;
this.renderer = null;
this.pinObj3D = new THREE.Object3D();
this.pinObj3D.name = 'pin';

this.mouseMaterialDefault = new THREE.MeshPhongMaterial({
    color: 0xadf1a7,
    // specular: 0x009900,
    // shininess: 30,
    //  wireframe:true,

Map.js

GitHub: zeesaas/Three-MapGL

52
53
54
55
56
57
58
59
60
61
  })
}

// 创建材质
createMaterial(options) {
  return new THREE.MeshPhongMaterial(options)
}

// 创建网格
createMesh(shape, options, name, isScience) {

+ 7 other calls in file

init.js

GitHub: shaungt1/sketch-threejs

166
167
168
169
170
171
172
173
174
175
};

var createCommet = function() {
  var base_geometry = new THREE.OctahedronGeometry(comet_radius, 2);
  var geometry = new THREE.BufferGeometry();
  var material = new THREE.MeshPhongMaterial({
    color: new THREE.Color('hsl(' + comet_color_h + ', 100%, 100%)'),
    flatShading: true
  });
  var positions = new Float32Array(base_geometry.vertices.length * 3);

260

+ 7 other calls in file

food.js

GitHub: kentywang/Agamari

33
34
35
36
37
38
39
40
41
42
// Create THREE object based on initial data parameters
let { type, parms, x, y, z } = this.initialData;
switch (type) {
  case 'box':
    geometry = new THREE.BoxBufferGeometry( parms[0], parms[1], parms[2] );
    material = new THREE.MeshPhongMaterial( {color: someColors[color], shading: THREE.FlatShading} );
    shape = new CANNON.Box(new CANNON.Vec3(parms[0] / 2, parms[1] / 2, parms[2] / 2));
    break;
  case 'moon':
    geometry = new THREE.IcosahedronBufferGeometry( parms[0], 1 );

+ 5 other calls in file

scene.js

GitHub: demo3d/threejs-mapping

52
53
54
55
56
57
58
59
60
61
  
  if(shapeCoords.length > 3) {
    var shape = new THREE.Shape(shapeCoords);
    var extrusionSettings = {amount: 10, bevelEnabled: false};
    var geometry = new THREE.ExtrudeGeometry(shape, extrusionSettings);
    var material = new THREE.MeshPhongMaterial({color: 0xcccccc});  
    var mesh = new THREE.Mesh(geometry,material );
    scene.add(mesh);
  }
});

+ 3 other calls in file

streetview.js

GitHub: Jam3/threejs-cubemap-compositor

36
37
38
39
40
41
42
43
44
45
  side: THREE.DoubleSide,
})
var sphere = new THREE.Mesh(geo, mat)

var itemGeo = new THREE.TorusKnotGeometry(0.02, 0.008, 128, 128)
var itemMat = new THREE.MeshPhongMaterial({
  // transparent: true,
  // shininess: 20,
  // metal: true,
  color: 0xffffff,

STL.js

GitHub: pevers/K3D-jupyter

43
44
45
46
47
48
49
50
51
52
} else {
    geometry = loader.parse(text);
}

if (geometry.hasColors) {
    material = new THREE.MeshPhongMaterial({
        opacity: geometry.alpha,
        vertexColors: THREE.VertexColors,
        wireframe: config.wireframe
    });

117

main.js

GitHub: fagan2888/EuroGridLayer

71
72
73
74
75
76
77
78
79
80
pointsContainer.add(pointCloud);
viewer.scene.add(pointsContainer);

/*     var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
    geometry.translate( 0, 0.5, 0 );
    var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
    for ( var i = 0; i < 500; i ++ ) {
        var mesh = new THREE.Mesh( geometry, material );
        mesh.position.x = Math.random() * 1600 - 800;
        mesh.position.y = 0;

+ 9 other calls in file

091_snow_forest.js

GitHub: avin/sketches

115
116
117
118
119
120
121
122
123
124

    return material;
}

function createGroundSnowMaterial() {
    const material = new THREE.MeshPhongMaterial({
        side: THREE.DoubleSide,
    });

    material.emissive.setHex(0xeeeeee);

+ 5 other calls in file

STLLoader.js

GitHub: TimothyStiles/meshdiff

18
19
20
21
22
23
24
25
26
27
 *  });
 *
 * For binary STLs geometry might contain colors for vertices. To use it:
 *  // use the same code to load STL as above
 *  if (geometry.hasColors) {
 *    material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
 *  } else { .... }
 *  var mesh = new THREE.Mesh( geometry, material );
 */
var THREE = require('three');

scene.js

GitHub: ryannjohnson/tutorial-chromebookplaystore-webgl

119
120
121
122
123
124
125
126
127
128
  color: new THREE.Color(0x000000),
  shininess: 0,
  emissiveIntensity: 1,
};
this.meteoriteMaterials = [
  new THREE.MeshPhongMaterial(Object.assign({}, defaultMaterial, {
    emissive: new THREE.Color(0x0d6fb5),
  })),
  new THREE.MeshPhongMaterial(Object.assign({}, defaultMaterial, {
    emissive: new THREE.Color(0xe52d2a),

+ 5 other calls in file

loaders.js

GitHub: avkudr/visa

46
47
48
49
50
51
52
53
54
55

let promise = new Promise(function(resolve, reject) {
    let loaderSTL = new THREE.STLLoader();
    loaderSTL.load( file, function ( geometry ) {
        let clr = (objectColor == undefined) ? 0x1258c9 : objectColor;
        let material = new THREE.MeshPhongMaterial( { color: clr } );
        let mesh = new THREE.Mesh( geometry, material );
        resolve(mesh);
    });
});

game.js

GitHub: avocadojesus/hackaholics

57
58
59
60
61
62
63
64
65
66

dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );

var materialNormalMap = new THREE.MeshPhongMaterial( {
  specular: 0x333333,
  shininess: 15,
  map: textureLoader.load( "/app/components/asteroids/earth_atmos_2048.jpg" ),
  specularMap: textureLoader.load( "/app/components/asteroids/earth_specular_2048.jpg" ),

+ 3 other calls in file

Scene.js

GitHub: gobrasil/lhbzr.github.io

62
63
64
65
66
67
68
69
70
71
const number = randomInt(0, this.geometryType.length - 1)

for (let i = 0; i < this.geometryLength; i++) {
  this.geometry[i] = new THREE.Mesh(
    this.geometryType[number],
    new THREE.MeshPhongMaterial({
      color: 0xFFFFFF,
      wireframe: true,
      transparent: true
    })

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About