Three.js 404页面3D浮动球体背景透明化实现问题求助

Hey there! That stubborn black background you're seeing is because Three.js's WebGLRenderer defaults to an opaque canvas with a black clear color baked in. Let's tweak a few settings to make the sphere's area fully transparent, so it blends seamlessly with your site's background.

Step 1: Enable Alpha in the Renderer #

When initializing the WebGLRenderer, add the alpha: true option. This tells Three.js to create a canvas with an alpha channel, which is required for transparency.

Step 2: Set Clear Color to Fully Transparent #

Even with alpha enabled, you need to explicitly set the renderer's clear color to be transparent. Use renderer.setClearColor(0x000000, 0) — the second value is the opacity (0 = fully see-through).

Step 3: Clean Up Conflicting CSS #

Your original CSS had some overlapping positioning and typos that could cause unexpected layout issues. We'll fix those to ensure the sphere sits correctly without extra background layers.

Here's the modified code with all these fixes:

Modified JavaScript Code

var $container = $('.bola'); 
// Add alpha: true to enable transparent canvas
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); 
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000); 
var scene = new THREE.Scene(); 
scene.add(camera); 
renderer.setSize(300, 300); 
// Set clear color to fully transparent
renderer.setClearColor(0x000000, 0);
$container.append(renderer.domElement); 

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

// Material 
var pinkMat = new THREE.MeshPhongMaterial({ 
  color: new THREE.Color("#C3073F"), 
  emissive: new THREE.Color("rgb(0,0,0)"), 
  specular: new THREE.Color("#C3073F"), 
  shininess: 50, 
  shading: THREE.FlatShading, 
  transparent: true, // Use boolean instead of 1 for readability
  opacity: 1 
}); 

var L1 = new THREE.PointLight(0xffffff, 1); 
L1.position.z = 100; 
L1.position.y = 100; 
L1.position.x = 100; 
scene.add(L1); 

var L2 = new THREE.PointLight(0xffffff, 0.8); 
L2.position.z = 200; 
L2.position.y = 400; 
L2.position.x = -100; 
scene.add(L2); 

// IcoSphere
var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(75, 1), pinkMat); 
Ico.rotation.z = 0.5; 
scene.add(Ico); 

function update() { 
  Ico.rotation.x += 2 / 100; 
  Ico.rotation.y += 2 / 100; 
} 

// Render 
function render() { 
  requestAnimationFrame(render); 
  renderer.render(scene, camera); 
  update(); 
} 
render();

Cleaned-up CSS

.cont-404 {
  position: relative;
  float: right;
} 
.mini {
  font-size: 1em;
  color: #fff;
  line-height: 9em;
  text-indent: 2.5em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Smoother centering */
  margin: 0;
} 
.mega {
  line-height: 1.65em;
  font-weight: bold;
  font-size: 11em;
  color: #fff;
  font-family: 'Roboto', sans-serif; /* Fixed typo from original code */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.bola {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  /* No background color here to keep transparency */
}
.boom {
  color: #f5f5f5;
}

Why This Works: #

• alpha: true unlocks the canvas's ability to display transparent pixels instead of forcing an opaque background.
• renderer.setClearColor(0x000000, 0) ensures the renderer doesn't draw any color behind the sphere, leaving that area see-through.
• The revised CSS uses transform: translate for more reliable centering and removes conflicting styles that could have hidden transparency.

Test this out, and your pink rotating sphere should sit perfectly on top of your site's background without that annoying black box!

内容的提问来源于stack exchange，提问作者Ahmed Gouda