How to use the AdditiveBlending function from three

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

three.AdditiveBlending is a constant that represents a blending operation used in Three.js, where the source and destination colors are added together.

init.js

137
138
139
140
141
142
143
144
145
    positions: positions,
    colors: colors,
    opacities: opacities,
    sizes: sizes,
    texture: createTexture(),
    blending: THREE.AdditiveBlending
  });
  camera.force.position.anchor.set(800, 0, 0);
}

259

simulator.js

GitHub: jjvanassen/flow

173
174
175
176
177
178
179
180
181
agentDat.orientation = orArray;

// bounding box
var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( sceneProp.SceneSize, sceneProp.SceneSize, sceneProp.SceneSize) ) );
helper.material.color.setHex( 0x404040);
helper.material.blending = THREE.AdditiveBlending;
helper.material.transparent = true;
helper.name = "helper";
scene.add( helper );

How does three.AdditiveBlending work?

three.AdditiveBlending is a blending mode used in Three.js that combines the colors of two materials being rendered by adding their RGB values together. This blending mode is commonly used to achieve effects such as light beams, glows, or explosions, as it can make the rendered colors appear brighter and more intense. When using three.AdditiveBlending, the alpha values of the materials are ignored, and only the RGB values are used in the blending calculation.

earth.js

GitHub: zwfgogo/solar-platform-view

281
282
283
284
285
286
287
288
289
290
mat.map = dotTexture;
mat.depthWrite = false;
mat.transparent = true;
mat.opacity = 0;
mat.side = THREE.FrontSide;
// mat.blending = THREE.AdditiveBlending
mat.blending = THREE.NormalBlending;
let n = i / 2;
mat.t_ = n * Math.PI * 2;
// 球面变化速度

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
import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  blending: THREE.AdditiveBlending,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

In this example, THREE.AdditiveBlending is used to create a MeshBasicMaterial with additive blending mode, which is then applied to a BoxGeometry mesh. The renderer.render method is called inside an animation loop to render the scene with the camera position set to z = 5.

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About