Making canvas background transparent

Question

Making canvas background transparent

67 Views Asked by B ANURAG At 17 March 2024 at 03:47

Here is my HTML, CSS, JAVASCRIPT (THREE.JS) code. Can you please analyze the code and check for my desired output that i put in my title.

//**HTMLCODE**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="/src/index.css" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/[email protected]/build/three.module.js",
          "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
        }
      }
    </script>
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>EXAMPLE</title>
  </head>
  <body>
    <div id="root"></div>
    <div class="globe-render" id="globe-render">
      <script type="module" src="./globe.js"></script>
    </div>
  </body>
</html>

**//CSS CODE:**

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  background-color: #000f14;
  margin: 0;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

#globe-render {
  position: absolute;
  top: -20%;
  left: 20%;
  background-color: rgb(255, 255, 255);
}
#myCanvas {
  position: absolute;
  background-color: green;
}


//JS CODE
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

//Radius define
let ParticleSurfaceLayer = 7.5;
let GlobeRadius = 6.6;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const container = document.querySelector(".globe-render");
renderer.setClearColor(0x000000,0);
container.appendChild(renderer.domElement);


// Group for globe and particle system
const group = new THREE.Group();
scene.add(group);

// Bloom pass for the globe
const renderScene = new RenderPass(scene, camera);
const globeBloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5,
  0.4,
  0.85
);
globeBloomPass.threshold = 0;
globeBloomPass.strength = 2;
globeBloomPass.radius = 0;

const globeComposer = new EffectComposer(renderer);
globeComposer.setSize(window.innerWidth, window.innerHeight);
globeComposer.addPass(renderScene);
globeComposer.addPass(globeBloomPass);

// Bloom pass for particles
const particleComposer = new EffectComposer(renderer);
particleComposer.setSize(window.innerWidth, window.innerHeight);
particleComposer.addPass(new RenderPass(group, camera)); // Assuming 'group' contains particles
const particleBloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5,
  0.4,
  0.85
);

particleBloomPass.threshold = 0;
particleBloomPass.strength = 1.3;
particleBloomPass.radius = 0.8;
particleComposer.addPass(particleBloomPass);

// Update size function
function updateSize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  camera.aspect = newWidth / newHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(newWidth, newHeight);

  const sphereRadius = Math.min(newWidth, newHeight) * 0.1;
  globe.geometry = new THREE.SphereGeometry(sphereRadius, 32, 32);

  const particleSizeMin = Math.min(newWidth, newHeight) * 0.001;
  const particleSizeMax = Math.min(newWidth, newHeight) * 0.004;

  group.children.forEach((particle) => {
    const randomSize = THREE.MathUtils.randFloat(
      particleSizeMin,
      particleSizeMax
    );
    particle.scale.set(randomSize, randomSize, randomSize);
  });

  // Update composer sizes
  globeComposer.setSize(newWidth, newHeight);
  particleComposer.setSize(newWidth, newHeight);
}

//orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
const loader = new THREE.TextureLoader();
controls.enableZoom = false;
// controls.enabled=false

// Initial setup
////////
const geometry = new THREE.SphereGeometry(GlobeRadius, 80, 80);
const material1 = new THREE.MeshBasicMaterial({
  map: loader.load("./8k_earth_nightmap_underlayer.jpg"),
  //transparent: true,
  opacity: 1,
});
const material2 = new THREE.MeshBasicMaterial({
  color: 0xff047e,
  transparent: true,
  opacity: 0.1,
});
const multimaterial = [material1, material2];
const globe = new THREE.Mesh(geometry, material1);
globe.layers.set(1);
group.add(globe);

// Particle System
const particleCount = 600;
const color = new THREE.Color("#fc2414");

for (let i = 0; i < particleCount; i++) {
  // ... (same as your code)

  const phi = Math.random() * Math.PI * 2;
  const theta = Math.random() * Math.PI - Math.PI / 2;
  const randomradius = 0.01 + Math.random() * 0.04;

  const radius = ParticleSurfaceLayer; // Radius of the sphere

  const x = radius * Math.cos(theta) * Math.cos(phi);
  const y = radius * Math.cos(theta) * Math.sin(phi);
  const z = radius * Math.sin(theta);

  const particleGeometry = new THREE.SphereGeometry(randomradius, 30, 25); // Initial size
  const particleMaterial = new THREE.MeshBasicMaterial({
    color: "#00FFFF",
  });
  const particle = new THREE.Mesh(particleGeometry, particleMaterial);

  particle.position.set(x, y, z);
  particle.layers.set(1);
  group.add(particle);
}

const ambientLight = new THREE.AmbientLight(0xffffff, 100);
scene.add(ambientLight);

// Camera position
camera.position.z = 15;

// Rotation animation
const rotationSpeed = 0.001;

// Animation function
const animate = function () {
  requestAnimationFrame(animate);

  group.rotation.y += rotationSpeed;

  // Render globe with bloom effect
  camera.layers.set(1);
  globeComposer.render();

  // Render particles with bloom effect
  particleComposer.render();
};
///////orbit controls///*
let isDragging = false;
let originalRotation = group.rotation.y;

// Event listener for mouse down
renderer.domElement.addEventListener("mousedown", () => {
  isDragging = true;
});

// Event listener for mouse up
renderer.domElement.addEventListener("mouseup", () => {
  isDragging = false;
  // Reset the rotation to its original position
  group.rotation.y = originalRotation;
});

// Event listener for mouse leave (in case mouse leaves the canvas while dragging)
renderer.domElement.addEventListener("mouseleave", () => {
  if (isDragging) {
    isDragging = false;
    // Reset the rotation to its original position
    group.rotation.y = originalRotation;
  }
});

// Handle window resize
window.addEventListener("resize", updateSize);

// Start animation
animate();

const canvas = document.querySelector("canvas");
canvas.id = "myCanvas";
canvas.classList.add("myCanvasClass");

Screen Shot of my rendered page

I tried setClearColor in js, transparent in the css block for canvas. I want the canvas convert from black background to transparent. Please some one help this.

Original Q&A

There are 1 best solutions below

**Vít Zadina** · Answer 1 · 2024-03-18T12:41:43.763000

I think, it could be problem with passes which are you using. If you remove these passes it still doesn't work? Because some passes could have problem with transparency. Try set webgl target and add RGBA format, it should help with problem. There is sample code, which should help with transparency.

const canvas = this.renderer.domElement;
const width = canvas.clientWidth * this.pixelRatio | 0;
const height = canvas.clientHeight * this.pixelRatio | 0;
const parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
const renderTarget = new THREE.WebGLRenderTarget(width, height, parameters);
renderTarget.texture.encoding = QUnityCore.instance.renderManager.renderer.outputEncoding
const composer = new EffectComposer(this.renderer, renderTarget);
composer.renderToScreen = false;

Or you can find more info in this thread. I hope this will help you.

Making canvas background transparent

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in THREE.JS

Related Questions in HTML5-CANVAS

Trending Questions

Popular # Hahtags

Popular Questions