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.
GitHub: tentone/geo-three
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;
+ 5 other calls in file
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;
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.
GitHub: kentywang/Agamari
![kentywang profile picture](/kentywang.png?size=40)
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
GitHub: dennisss/tansa
![dennisss profile picture](/dennisss.png?size=40)
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.
GitHub: kentywang/Agamari
![kentywang profile picture](/kentywang.png?size=40)
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
GitHub: avin/generative
![avin profile picture](/avin.png?size=40)
84 85 86 87 88 89 90 91 92
color: 0x30404d, }); } function createHatMaterial() { return new THREE.MeshPhongMaterial({ color: 0xf5498b, }); }
+ 5 other calls in file
GitHub: shinseed/BIMServer-NodeJs
![shinseed profile picture](/shinseed.png?size=40)
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,
GitHub: zeesaas/Three-MapGL
![zeesaas profile picture](/zeesaas.png?size=40)
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
GitHub: shaungt1/sketch-threejs
![shaungt1 profile picture](/shaungt1.png?size=40)
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);
+ 7 other calls in file
GitHub: kentywang/Agamari
![kentywang profile picture](/kentywang.png?size=40)
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
GitHub: demo3d/threejs-mapping
![demo3d profile picture](/demo3d.png?size=40)
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
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,
GitHub: pevers/K3D-jupyter
![pevers profile picture](/pevers.png?size=40)
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 });
GitHub: fagan2888/EuroGridLayer
![fagan2888 profile picture](/fagan2888.png?size=40)
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
GitHub: avin/sketches
![avin profile picture](/avin.png?size=40)
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
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');
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
GitHub: avkudr/visa
![avkudr profile picture](/avkudr.png?size=40)
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); }); });
GitHub: avocadojesus/hackaholics
![avocadojesus profile picture](/avocadojesus.png?size=40)
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
GitHub: gobrasil/lhbzr.github.io
![gobrasil profile picture](/gobrasil.png?size=40)
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 })
three.Vector3 is the most popular function in three (22341 examples)