Đổi background three.js thành trong suốt hoặc màu tùy chỉnh

Trong Three.js, background được kiểm soát bởi WebGLRenderer. Mặc định background đen không trong suốt.

1. Background trong suốt (Transparent)

Truyền alpha: true khi tạo renderer, sau đó set clear color với alpha = 0:

var renderer = new THREE.WebGLRenderer({ 
  alpha: true,           // Bật alpha channel cho canvas
  antialias: true        // Tùy chọn: mượt cạnh
});

// Đặt clear color: màu đen (0x000000) với alpha = 0 (hoàn toàn trong suốt)
renderer.setClearColor(0x000000, 0); // Tham số 2: opacity (0-1)

// Hoặc ngắn gọn:
renderer.setClearColor(0x000000, 0); // Mặc định đã là này khi alpha=true

Canvas hiện có nền trong suốt, cho thấy HTML/CSS phía sau (body background, v.v.).

2. Background màu tùy chỉnh

// Màu hex (0xRRGGBB) - opacity mặc định 1
renderer.setClearColor(0xb0f442); // Màu xanh lá nhạt

// Hoặc với opacity tùy chỉnh (cần alpha: true)
renderer.setClearColor(0x0000ff, 0.5); // Xanh dương bán trong suốt

3. Background là Texture / CubeTexture (Skybox)

// Texture 2D
var texture = new THREE.TextureLoader().load('bg.jpg');
scene.background = texture;

// CubeTexture (Skybox/Environment)
var urls = [
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
];
var cubeTexture = new THREE.CubeTextureLoader().load(urls);
scene.background = cubeTexture;

4. Background Gradient (Custom Shader)

Three.js không có gradient built-in cho background. Cách làm:

• Render một plane lớn phủ toàn màn hình với shader gradient.
• Hoặc dùng scene.background = new THREE.CanvasTexture(canvas) nơi canvas vẽ gradient 2D.

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; background: linear-gradient(45deg, #1a1a2e, #16213e); min-height: 100vh; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    
    // Renderer trong suốt
    var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0); // Trong suốt
    document.body.appendChild(renderer.domElement);
    
    // Cube demo
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
    
    // Resize
    window.addEventListener('resize', function() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

Lưu ý

• alpha: true tốn thêm bộ nhớ GPU cho alpha channel.
• Nếu không cần trong suốt, không bật alpha để tiết kiệm hiệu năng.
• CSS background của body hoặc container cha sẽ hiển thị qua canvas trong suốt.