How to use the BackSide function from three

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

three.BackSide is a constant representing the back side of a mesh in the Three.js library.

scene-editor.js

184
185
186
187
188
189
190
191
192
193
var cubeMaterial = new THREE.ShaderMaterial( {
  fragmentShader: cubeShader.fragmentShader,
  vertexShader: cubeShader.vertexShader,
  uniforms: cubeShader.uniforms,
  depthWrite: false,
  side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
Object.defineProperty( cubeMaterial, 'map', {
  get: function () {

JSONLoader.js

GitHub: alan-wu/ZincJS

671
672
673
674
675
676
677
678
679
680

if (materials && materials.length > 0) {
	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) {

+ 23 other calls in file

How does three.BackSide work?

three.BackSide is a constant that represents the back side of a three.js 3D object, which can be used in the side property of a material to specify how it should be rendered. When the side property is set to three.BackSide, the material will be rendered only on the back faces of the geometry.

zincObject.js

GitHub: alan-wu/ZincJS

85
86
87
88
89
90
91
92
93
94
    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;
  }
  this.morph.material.side = THREE.BackSide;
  this.morph.material.needsUpdate = true;
  this.morph.add(this.secondaryMesh);
  this.animationGroup.add(this.secondaryMesh);
}

+ 14 other calls in file

SceneHelper.js

GitHub: ghost0913/LearnFun3D

52
53
54
55
56
57
58
59
60
        new THREE.ShaderMaterial({
            fragmentShader : skyboxShader.fragmentShader,
            vertexShader : skyboxShader.vertexShader,
            uniforms : skyboxShader.uniforms,
            depthWrite : false,
            side : THREE.BackSide
        })
    ));
},

Ai Example

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

In the above example, the MeshBasicMaterial is created with color set to 0xff0000 and side set to BackSide, which will only render the back faces of the mesh.

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About