How to use the Mesh function from three
Find comprehensive JavaScript three.Mesh code examples handpicked from public code repositorys.
three.Mesh is a class in the Three.js library that is used to create a three-dimensional object composed of a geometry and a material.
GitHub: K3D-tools/K3D-jupyter
![K3D-tools profile picture](/K3D-tools.png?size=40)
152 153 154 155 156 157 158 159 160 161
heads = BufferGeometryUtils.mergeBufferGeometries(heads); heads.computeBoundingSphere(); heads.computeBoundingBox(); object.add( new THREE.Mesh( heads, new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}), ), );
+ 23 other calls in file
75 76 77 78 79 80 81 82 83
stencilBuffer: true, }); const camera2 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const scene2 = new THREE.Scene(); const quad2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), copyMaterial); quad2.frustumCulled = false; scene2.add(quad2);
How does three.Mesh work?
three.Mesh is a class in the Three.js library that represents a geometric object with a material that is used for rendering in a 3D scene. The Mesh class inherits from the Object3D class, and it is the most commonly used class in Three.js for creating 3D objects with a visual representation. It is constructed by passing in a Geometry object and a Material object as arguments, which define the shape and appearance of the object respectively. The Mesh class also provides methods for manipulating the position, rotation, and scale of the object in 3D space.
GitHub: K3D-tools/K3D-jupyter
200 201 202 203 204 205 206 207 208 209
}); geometry.computeBoundingSphere(); geometry.computeBoundingBox(); const object = new THREE.Mesh(geometry, material); object.applyMatrix4(modelMatrix); object.updateMatrixWorld(); /*
+ 3 other calls in file
12 13 14 15 16 17 18 19 20 21
points.push(p.x, p.y, p.z) } const line = new MeshLine() line.setPoints(points) return new THREE.Mesh(line, material) } else if (primitive.type === 'boxgrid') { const color = primitive.color ? primitive.color : 'aqua' const sx = primitive.end.x - primitive.start.x
+ 5 other calls in file
Ai Example
1 2 3 4 5 6 7
// create a Mesh using a BoxGeometry and a MeshBasicMaterial const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const mesh = new THREE.Mesh(geometry, material); // add the Mesh to the scene scene.add(mesh);
In this example, we create a new BoxGeometry and MeshBasicMaterial to define the shape and appearance of our Mesh, respectively. We then pass these objects to the THREE.Mesh constructor to create a new Mesh. Finally, we add the Mesh to our scene using the scene.add method.
37 38 39 40 41 42 43 44 45 46 47 48
} 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 } class Entities {
+ 3 other calls in file
43 44 45 46 47 48 49 50 51 52
geometry.setAttribute('normal', new THREE.BufferAttribute(data.geometry.normals, 3)) geometry.setAttribute('color', new THREE.BufferAttribute(data.geometry.colors, 3)) geometry.setAttribute('uv', new THREE.BufferAttribute(data.geometry.uvs, 2)) geometry.setIndex(data.geometry.indices) mesh = new THREE.Mesh(geometry, this.material) mesh.position.set(data.geometry.sx, data.geometry.sy, data.geometry.sz) this.sectionMeshs[data.key] = mesh this.scene.add(mesh) } else if (data.type === 'sectionFinished') {
+ 3 other calls in file
GitHub: mattdesl/codevember
![mattdesl profile picture](/mattdesl.png?size=40)
77 78 79 80 81 82 83 84 85 86
const rings = newArray(3).map((_, i) => { const mat = material.clone() mat.uniforms.ring.value = i mat.uniforms.color.value.set(colors[i % colors.length]) return new THREE.Mesh(geometry, mat) }) let analyser, sampleRate, fftSize if (audio && AudioContext) {
GitHub: edankwan/Constraint
![edankwan profile picture](/edankwan.png?size=40)
28 29 30 31 32 33 34 35 36 37
transparent: true, depthWrite: false, depthTest: false }); mesh = exports.mesh = new THREE.Mesh( geometry, material ); mesh.frustumCulled = false; mesh.renderOrder = 1024; }
+ 3 other calls in file
269 270 271 272 273 274 275 276 277
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); }
+ 38 other calls in file
GitHub: ASSERT-KTH/ci-hackathon
259 260 261 262 263 264 265 266 267 268
position[2] - 3) spotLight.target = targetObject; spotLight.target.updateMatrixWorld() bulbLight.add(new THREE.Mesh(bulbGeometry, bulbMat)); //bulbLight.position.set(...position); spotLight.castShadow = true; lightHelper = new THREE.SpotLightHelper( spotLight ); //scene.add( lightHelper );
+ 5 other calls in file
GitHub: avin/generative
![avin profile picture](/avin.png?size=40)
190 191 192 193 194 195 196 197 198 199
// --------------------------------------------- // Земля // --------------------------------------------- { const geometry = new THREE.PlaneGeometry(200, 200, 100, 100); const plane = new THREE.Mesh(geometry, floorMaterial); plane.rotation.x = -Math.PI * 0.5; scene.add(plane); const shadowPlane = new THREE.Mesh(geometry, new THREE.ShadowMaterial({ opacity: 0.5 }));
+ 11 other calls in file
GitHub: hobuinc/usgs-lidar
793 794 795 796 797 798 799 800 801
var matbg = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }); var gbg = new THREE.PlaneGeometry(w / 4, h / 4); var mbg = new THREE.Mesh(g, matbg); m.position.set(w - (w / 4) + (w / 8) - 10, ( h / 4) - (h / 8) + 10, 0); // much math to account for plane having its origin right in the middle mbg.position.set(w - (w / 4) + (w / 8) - 10, ( h / 4) - (h / 8) + 10, -1); // much math to account for plane having its origin right in the middle
+ 4 other calls in file
GitHub: whos-evan/kazwire
85 86 87 88 89 90 91 92 93 94
); this.material = new THREE.MeshToonMaterial({ color: this.color, shading: THREE.FlatShading }); this.mesh = new THREE.Mesh(geometry, this.material); this.mesh.position.set(this.position.x, this.position.y, this.position.z); } getAxis() {
63 64 65 66 67 68 69 70 71 72
} geometry.computeBoundingSphere(); geometry.computeBoundingBox(); object = new THREE.Mesh(geometry, material); interactionsHelper.init(config, object, K3D); object.applyMatrix4(modelMatrix);
GitHub: K3D-tools/K3D-jupyter
439 440 441 442 443 444 445 446 447 448
line.setGeometry(new Float32Array(vertices), true, widths, colors); line.geometry.computeBoundingSphere(); line.geometry.computeBoundingBox(); plane.obj = new THREE.Mesh(line.geometry, material); this.gridScene.add(plane.obj); }, this); }, this);
40 41 42 43 44 45 46 47 48 49
inTweens.push(this.getInTween(lines[i])); } var triangleGeometry = new THREE.TetrahedronGeometry(3); var triangleMaterial = new THREE.MeshLambertMaterial({ shading: THREE.FlatShading }); var triangleMesh = new THREE.Mesh(triangleGeometry, triangleMaterial); var follow = this.getFollow(triangleMesh, subs); for (var k = 0, l = follow.meshes.length; k < l; k++) {
+ 7 other calls in file
2387 2388 2389 2390 2391 2392 2393 2394 2395 2396
) { // .isSkinnedMesh isn't in glTF spec. See .markDefs() mesh = meshDef.isSkinnedMesh === true ? new THREE.SkinnedMesh(geometry, material) : new THREE.Mesh(geometry, material); if ( mesh.isSkinnedMesh === true && !mesh.geometry.attributes.skinWeight.normalized
+ 14 other calls in file
GitHub: 52black/scratch-vm
1349 1350 1351 1352 1353 1354 1355 1356 1357 1358
mesh = new THREE.Points( buffergeometry, createdMaterials[ 0 ] ); } else { mesh = new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] ); } }
+ 37 other calls in file
749 750 751 752 753 754 755 756 757 758
buffergeometry.addGroup( sourceMaterial.groupStart, sourceMaterial.groupCount, mi ); } var multiMaterial = new THREE.MultiMaterial( createdMaterials ); mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, multiMaterial ) : new THREE.LineSegments( buffergeometry, multiMaterial ) ); } else { mesh = ( ! isLine ? new THREE.Mesh( buffergeometry, createdMaterials[ 0 ] ) : new THREE.LineSegments( buffergeometry, createdMaterials[ 0 ] ) );
+ 43 other calls in file
GitHub: alan-wu/ZincJS
80 81 82 83 84 85 86 87 88 89
ZincObject.prototype.checkAndCreateTransparentMesh = function(options) { if (this.isGeometry && this.morph.material && this.morph.material.transparent) { if (!this.secondaryMesh) { let secondaryMaterial = this.morph.material.clone(); secondaryMaterial.side = THREE.FrontSide; this.secondaryMesh = new THREE.Mesh(this.morph.geometry, secondaryMaterial); this.secondaryMesh.renderOrder = this.morph.renderOrder + 1; this.secondaryMesh.userData = this; this.secondaryMesh.name = this.groupName; }
+ 29 other calls in file
three.Vector3 is the most popular function in three (22341 examples)