Moment For Technology

ThreeJS Example webgl_decals decals

Posted on Dec. 2, 2022, 2:30 p.m. by Samar Ramesh
Category: The front end Tag: The front end webgl

Threejs.org/examples/#w...

  • Applique material
const decalMaterial = new THREE.MeshPhongMaterial( {
        specular: 0x444444.map: decalDiffuse,
        normalMap: decalNormal,
        normalScale: new THREE.Vector2( 1.1 ),
        shininess: 30.transparent: true.depthTest: true.depthWrite: false.// Why is deep write false
        polygonOffset: true.polygonOffsetFactor: - 4.wireframe: false});Copy the code
  • The white line
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );

line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
scene.add( line );
Copy the code
  • Mouse events
raycaster = new THREE.Raycaster();
function checkIntersection( x, y ) {
        if ( mesh === undefined ) return;
        mouse.x = ( x / window.innerWidth ) * 2 - 1;
        mouse.y = - ( y / window.innerHeight ) * 2 + 1;
        raycaster.setFromCamera( mouse, camera );
        raycaster.intersectObject( mesh, false, intersects );
        if ( intersects.length  0 ) {
                const p = intersects[ 0 ].point;
                mouseHelper.position.copy( p );
                intersection.point.copy( p );
                const n = intersects[ 0 ].face.normal.clone();
                n.transformDirection( mesh.matrixWorld );
                n.multiplyScalar( 10 );
                n.add( intersects[ 0 ].point );
                intersection.normal.copy( intersects[ 0 ].face.normal );
                mouseHelper.lookAt( n );
                const positions = line.geometry.attributes.position;
                positions.setXYZ( 0, p.x, p.y, p.z );
                positions.setXYZ( 1, n.x, n.y, n.z );
                positions.needsUpdate = true;
                intersection.intersects = true;
                intersects.length = 0;
        } else {
                intersection.intersects = false; }}Copy the code
  • shooting
position.copy( intersection.point ); / / position
orientation.copy( mouseHelper.rotation ); // Rotation direction
if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
const scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
size.set( scale, scale, scale ); / / size
const material = decalMaterial.clone();
material.color.setHex( Math.random() * 0xffffff );
const m = new THREE.Mesh( new DecalGeometry( mesh, position, orientation, size ), material ); / / way
decals.push( m );
scene.add( m );
Copy the code
  • delete
decals.forEach( function ( d ) { scene.remove( d ); }); decals.length =0;
Copy the code
Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.