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.
GitHub: ykob/sketch-threejs
![ykob profile picture](/ykob.png?size=40)
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); }
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.
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.
three.Vector3 is the most popular function in three (22341 examples)