Home

Index

How to use the MeshBasicMaterial function from three

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

Three.MeshBasicMaterial is a class in Three.js library that creates a basic material for rendering mesh objects.

Vectors.js

154
155
156
157
158
159
160
161
162
    heads.computeBoundingBox();

    object.add(
        new THREE.Mesh(
            heads,
            new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}),
        ),
    );
}

117

808

+ 11 other calls in file

geo-three.cjs

GitHub: tentone/geo-three

1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
MapMartiniHeightNode.geometry = new MapNodeGeometry(1, 1, 1, 1);
MapMartiniHeightNode.tileSize = 256;


class MapView extends three.Mesh {
    constructor(root = MapView.PLANAR, provider = new OpenStreetMapsProvider(), heightProvider = null) {
        super(undefined, new three.MeshBasicMaterial({ transparent: true, opacity: 0.0 }));
        this.lod = null;
        this.provider = null;
        this.heightProvider = null;
        this.root = null;

468

+ 5 other calls in file

How does three.MeshBasicMaterial work?

The three.MeshBasicMaterial class in the Three.js library creates a basic material for rendering a mesh by defining its color, opacity, and wireframe properties among others. It is a simple material that does not respond to light sources and can be used for creating unlit surfaces. When rendering, each pixel of the mesh is drawn with the specified color, irrespective of the lighting or shading of the scene. The material is suitable for creating simple 3D models, wireframes, and particle systems, among others.

entities.js

GitHub: PrismarineJS/prismarine-viewer

36
37
38
39
40
41
42
43
44
45
46
    }
  }


  const geometry = new THREE.BoxGeometry(entity.width, entity.height, entity.width)
  geometry.translate(0, entity.height / 2, 0)
  const material = new THREE.MeshBasicMaterial({ color: 0xff00ff })
  const cube = new THREE.Mesh(geometry, material)
  return cube
}

163

+ 3 other calls in file

bisweb_orthogonalviewerelement.js

GitHub: bioimagesuiteweb/bisweb

270
271
272
273
274
275
276
277
278
279
var wd=this.internal.imagespa[0] * 4;


if (!this.internal.simplemode) {
    this.internal.origin=new THREE.Mesh(bisCrossHair.createcrosshair(wd,this.internal.imagespa[0],false), 
                              new THREE.MeshBasicMaterial( {color: 0xffffff, wireframe:false}));
    subviewer.getScene().add(this.internal.origin);
}

return subviewer;

+ 38 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
// Create a geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);

// Create a material with red color
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// Create a mesh with geometry and material
const mesh = new THREE.Mesh(geometry, material);

// Add mesh to the scene
scene.add(mesh);

This example creates a red cube using BoxGeometry and MeshBasicMaterial and adds it to the scene.

index.js

GitHub: ASSERT-KTH/ci-hackathon

155
156
157
158
159
160
161
162
163

// R1 lights
var fontLoader = new THREE.FontLoader();

const materials = [
    new THREE.MeshBasicMaterial( { color: 0x00ff00 } )
];

fontLoader.load( '/static/roboto_regular.json', function ( font ) {

+ 2 other calls in file

axis.js

GitHub: tumblr/data-lasso

35
36
37
38
39
40
41
42
43
    size: options.legendSize,
    height: textGeometryHeight,
    curveSegments: textCurveSegments,
});

var material = new THREE.MeshBasicMaterial({
    color: options.legendColor,
    transparent: true,
});

119

+ 3 other calls in file

software-renderer.js

GitHub: AVGP/three-software-renderer

588
589
590
591
592
593
594
595
596

if (!texture.data) return;

textures[material.map.id] = texture;

if (material instanceof THREE.MeshBasicMaterial
  || material instanceof THREE.SpriteMaterial) {

  shader = basicMaterialShader;

render.js

GitHub: hobuinc/usgs-lidar

788
789
790
791
792
793
794
795
796
797
	side: THREE.DoubleSide
});
var g = new THREE.PlaneGeometry(w / 4, h / 4);
var m = new THREE.Mesh(g, mat);

var matbg = new THREE.MeshBasicMaterial({
	color: 0xffffff,
	side: THREE.DoubleSide
});
var gbg = new THREE.PlaneGeometry(w / 4, h / 4);

110

+ 3 other calls in file

SuperHead.js

GitHub: MozillaReality/puzzle-rain

18
19
20
21
22
23
24
25
26
27
self.mesh.receiveShadow = false;
//
var materials = [

  new THREE.MeshLambertMaterial({ color: 0x90A075 }),
  new THREE.MeshBasicMaterial({ color: 0xffffff})

];
self.mesh.material = new THREE.MultiMaterial(materials);
self.mesh.material.materials[0].skinning = true;

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
  }
}

if (
  materialDef.normalTexture !== undefined &&
  materialType !== THREE.MeshBasicMaterial
) {
  pending.push(
    parser.assignTexture(
      materialParams,

+ 74 other calls in file

textureArray.js

GitHub: alan-wu/ZincJS

62
63
64
65
66
67
68
69
70
71
    if (options.glslVersion) {
      material.glslVersion = options.glslVersion;
    }
  }
} else {
  material = new THREE.MeshBasicMaterial({
    color : new THREE.Color(1, 1, 1),
    transparent : false,
    opacity : 1.0,
    map : this.impl,

+ 7 other calls in file

index.md?plain=1

GitHub: bostelk/hedron

120
121
122
123
124
125
126
127
128

// Empty array to be populated with meshes
this.meshes = []

// Defining a single material for all the polyhedra
const mat = new THREE.MeshBasicMaterial(
  { wireframe: true, color: 0xffffff }
)
const size = 300

index.js

GitHub: nfbinteractive/Bear71VR_OpenSource

42
43
44
45
46
47
48
49
50
51
this.renderer = params.renderer;
this.camera = camera;
this.scene = scene;
var plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1, 1, 1), 
  new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.05,
    color: new THREE.Color(0.5, 0.5, 0.5),
    side: THREE.DoubleSide

+ 7 other calls in file

spotlightview.js

GitHub: audunsh/evince

470
471
472
473
474
475
476
477
478
    */



    //const geometry = new THREE.CylinderGeometry( 1, 1, 20, 32 );
    //const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    //const cylinder = new THREE.Mesh( geometry, material );
    //scene.add( cylinder );
}

+ 3 other calls in file

denseview.js

GitHub: audunsh/evince

95
96
97
98
99
100
101
102
103
//let aCurveFloat32 = new Float32Array(this.pos.buffer); //, 3);

//geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

const plane_1_geometry = new THREE.PlaneGeometry( 1, 1 );
const plane_1_material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
let plane_1_mesh = new THREE.Mesh( plane_1_geometry, plane_1_material );

this.scene.add(plane_1_mesh);

+ 2 other calls in file

Explorer.js

GitHub: StudioFolder/float-predictor

34
35
36
37
38
39
40
41
42
43
this.avgSpeed = 0;
this.totalDistance = 0;
const c = 0xffffff;
this.lineMaterial = new THREE.LineBasicMaterial({ transparent: true, color: c, linewidth: 2.0 });
this.sphereMaterial = new THREE.MeshBasicMaterial({ transparent: true, color: c, opacity: 0.0 });
this.animatingSphereMaterial = new THREE.MeshBasicMaterial({ transparent: true, color: c, opacity: 1.0 });
this.facesMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.0, side: THREE.DoubleSide });
this.lineSegmentMaterial = new THREE.LineBasicMaterial({ transparent: true, color: 0xaaaaaa, opacity: 0.0, linewidth: 1.0 });
this.lastPosition = new THREE.Vector3(0, 0, 0);
this.spheres = [];

+ 5 other calls in file

scenes.js

GitHub: gracexu94/FinalProject

97
98
99
100
101
102
103
104
105
106
switch (randomInt) {
  case 0: 
    return new THREE.MeshBasicMaterial( {color: getRandomColor()} );
    break;
  case 1: 
    return new THREE.MeshBasicMaterial( {color: getRandomColor(), wireframe: true} );
    break;
  case 2:
    return new THREE.MeshNormalMaterial();
    break;

+ 11 other calls in file

TransformControls.js

GitHub: MozillaReality/mred

1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
const TransformControlsPlane = function () {




    THREE.Mesh.call( this,
        new THREE.PlaneBufferGeometry( 100000, 100000, 2, 2 ),
        new THREE.MeshBasicMaterial( { visible: false, wireframe: true, side: THREE.DoubleSide, transparent: true, opacity: 0.1 } )
    );


    this.type = 'TransformControlsPlane';

index.js

GitHub: OpenSlicer/OpenSlicer

259
260
261
262
263
264
265
266
267
268
269
270




function computeLayerTriangles(show) {
    timer = new Timer()
    let obj = mainObj
    let mat = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        wireframe: true,
        transparent: true,
        opacity: 0.2,

+ 8 other calls in file

crystals.js

GitHub: funwithtriangles/polyop-ceremony

73
74
75
76
77
78
79
80
81
82
        changeSpeed: function(skip, speed) {
                params.speed = speed;
        }
}

var crystalMaterial = new THREE.MeshBasicMaterial({
        wireframe: true,
        transparent: true,
        opacity: params.opacity
});

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About