Home

Index

How to use the DoubleSide function from three

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

three.DoubleSide is a constant that represents the double-sided rendering mode in Three.js, which means the material will be visible from both sides.

SkyOctahedron.js

GitHub: stephensmitchell-forks/sketch-threejs

59
60
61
62
63
64
65
66
67
68
      uniforms: this.uniforms,
      vertexShader: require('./glsl/skyOctahedron.vs').default,
      fragmentShader: require('./glsl/skyOctahedron.fs').default,
      flatShading: true,
      transparent: true,
      side: THREE.DoubleSide
    })
  )
}
render(time) {

260

geo-three.cjs

GitHub: tentone/geo-three

1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
class MapMartiniHeightNode extends MapHeightNode {
    constructor(parentNode = null, mapView = null, location = QuadTreePosition.root, level = 0, x = 0, y = 0, { elevationDecoder = null, meshMaxError = 10, exageration = 1 } = {}) {
        super(parentNode, mapView, location, level, x, y, MapMartiniHeightNode.geometry, MapMartiniHeightNode.prepareMaterial(new three.MeshPhongMaterial({
            map: MapMartiniHeightNode.emptyTexture,
            color: 0xFFFFFF,
            side: three.DoubleSide
        }), level, exageration));
        this.elevationDecoder = {
            rScaler: 256,
            gScaler: 1,

468

How does three.DoubleSide work?

three.DoubleSide is an enumeration value representing which side of a mesh's faces should be rendered when double-sided rendering is enabled, with options including FrontSide, BackSide, and DoubleSide. When DoubleSide is used, both sides of the mesh's faces will be rendered.

PolyhedralDiagram.js

GitHub: shrekshao/Polyhedron3D

162
163
164
165
166
167
168
169
170
    // forceFace: new THREE.MeshPhongMaterial( { 
    //     color: 0xffaa00, 
    //     shading: THREE.FlatShading,
    //     opacity: 0.9,
    //     transparent: true,
    //     side: THREE.DoubleSide
    // })

},

zincObject.js

GitHub: alan-wu/ZincJS

98
99
100
101
102
103
104
105
106
107
  if (this.isGeometry && this.secondaryMesh) {
    this.morph.remove(this.secondaryMesh);
    this.animationGroup.uncache(this.secondaryMesh);
    this.animationGroup.remove(this.secondaryMesh);
  }
  this.morph.material.side = THREE.DoubleSide;
}

ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour) {
  this.animationGroup = new THREE.AnimationObjectGroup(mesh);

Ai Example

1
2
3
4
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  side: THREE.DoubleSide,
});

This will create a red material that is visible from both sides of the mesh it is applied to.

loaders.js

GitHub: avkudr/visa

27
28
29
30
31
32
33
34
35
36
mtlLoader.setPath( filepath );
mtlLoader.setTexturePath( filepath + "textures/" );

mtlLoader.load( filename + '.mtl', function( materials ) {
    materials.preload();
    materials.side = THREE.DoubleSide;
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( filepath );
    objLoader.load( filename + '.obj', function ( mesh ) {

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2062
2063
2064
2065
2066
2067
2068
2069
2070
    );
  }
}

if (materialDef.doubleSided === true) {
  materialParams.side = THREE.DoubleSide;
}

var alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;

+ 14 other calls in file

index.cjs

GitHub: Brakebein/node-three-gltf

1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
    pending.push(Promise.all(this._invokeAll(function (ext) {
        return ext.extendMaterialParams && ext.extendMaterialParams(materialIndex, materialParams);
    })));
}
if (materialDef.doubleSided === true) {
    materialParams.side = three.DoubleSide;
}
const alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;
if (alphaMode === ALPHA_MODES.BLEND) {
    materialParams.transparent = true;

JSONLoader.js

GitHub: alan-wu/ZincJS

673
674
675
676
677
678
679
680
681
682
if (json.materials[0].singleSided) {
	materials[0].side = THREE.FrontSide;
} else if (json.materials[0].flipSided){
	materials[0].side = THREE.BackSide;
} else {
	materials[0].side = THREE.DoubleSide;
     }
     if (json.materials[0].specularCoef) {
       materials[0].shininess = Math.floor(json.materials[0].specularCoef / 3);
     }

+ 23 other calls in file

textureArray.js

GitHub: alan-wu/ZincJS

67
68
69
70
71
72
73
74
75
76
  material = new THREE.MeshBasicMaterial({
    color : new THREE.Color(1, 1, 1),
    transparent : false,
    opacity : 1.0,
    map : this.impl,
    side : THREE.DoubleSide
  });
}
if (material) {
  material.needsUpdate = true;

+ 7 other calls in file

MMDLoader.js

GitHub: BaurTokenov/three-js-editor-2

742
743
744
745
746
747
748
749
750
751
params.blendDst = three_1.OneMinusSrcAlphaFactor;
params.blendSrcAlpha = three_1.SrcAlphaFactor;
params.blendDstAlpha = three_1.DstAlphaFactor;
// side
if (data.metadata.format === 'pmx' && (material.flag & 0x1) === 1) {
    params.side = three_1.DoubleSide;
}
else {
    params.side = params.opacity === 1.0 ? three_1.FrontSide : three_1.DoubleSide;
}

+ 4 other calls in file

webgl_main.js

GitHub: utunga/deeppbr.ai

184
185
186
187
188
189
190
191
192
193

material.map.wrapS = THREE.RepeatWrapping;
material.roughnessMap.wrapS = THREE.RepeatWrapping;
material.metalnessMap.wrapS = THREE.RepeatWrapping;
material.normalMap.wrapS = THREE.RepeatWrapping;
material.side = THREE.DoubleSide;

group.traverse( function ( child ) {
    if ( child instanceof THREE.Mesh ) {
        child.material = material;

+ 3 other calls in file

GLTFLoader.js

GitHub: VeinKowal/veins

2184
2185
2186
2187
2188
2189
2190
2191
2192
    return ext.extendMaterialParams && ext.extendMaterialParams(materialIndex, materialParams);
  })));
}

if (materialDef.doubleSided === true) {
  materialParams.side = _three.DoubleSide;
}

var alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;

ColladaLoader.js

GitHub: isjackwild/deconstruction

1153
1154
1155
1156
1157
1158
1159
1160
1161
if ( geometry.doubleSided ) {

	if ( !( instance_material.symbol in double_sided_materials ) ) {

		var _copied_material = material3js.clone();
		_copied_material.side = THREE.DoubleSide;
		double_sided_materials[ instance_material.symbol ] = _copied_material;

	}

+ 10 other calls in file

OutlinePass.js

GitHub: 1anRobinson/JS_Engine

530
531
532
533
534
535
536
537
538

var resx = Math.round(this.resolution.x / this.downSampleRatio);
var resy = Math.round(this.resolution.y / this.downSampleRatio);

this.maskBufferMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
this.maskBufferMaterial.side = THREE.DoubleSide;
this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y, pars);
this.renderTargetMaskBuffer.texture.name = "OutlinePass.mask";
this.renderTargetMaskBuffer.texture.generateMipmaps = false;

+ 53 other calls in file

model.js

GitHub: Neticon/webgl-tests

123
124
125
126
127
128
129
130
131
132
}
function getPlane(...args) {
  const geometry = new THREE.PlaneGeometry(...args)
  const material = new THREE.MeshPhongMaterial({color: 0xbfbfbf, wireframe: false })
  // const material = new THREE.ShadowMaterial({opacity:.5})
  material.side = THREE.DoubleSide
  const mesh = new THREE.Mesh(geometry, material)

  return mesh
}

+ 2 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