three.js所透明背景完全不

工作，我一直在阅读的一些问题从别人已经问人在这里，特别是这一个：three.js所透明背景完全不

我需要背景透明，而不是成为黑人，但这不适合我。

添加这些行：（在我上面贴的问题读取）

var renderer = new THREE.WebGLRenderer({ alpha: true }); 
renderer.setClearColor(0x000000, 0);

它不工作。有完整的代码：

var container, stats; 
 

 
var camera, scene, renderer; 
 

 
var mouseX = 0, mouseY = 0; 
 

 
var windowHalfX = window.innerWidth/2; 
 
var windowHalfY = window.innerHeight/2; 
 

 
var renderer = new THREE.WebGLRenderer({ alpha: true }); 
 

 

 
init(); 
 
animate(); 
 

 

 
function init() { 
 

 
    container = document.createElement('div'); 
 
    document.body.appendChild(container); 
 

 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
 
    camera.position.z = 250; 
 

 
    // scene 
 

 
    scene = new THREE.Scene(); 
 

 
    var ambient = new THREE.AmbientLight(0x444444); 
 
    scene.add(ambient); 
 

 
    var directionalLight = new THREE.DirectionalLight(0xffeedd); 
 
    directionalLight.position.set(0, 0, 1).normalize(); 
 
    scene.add(directionalLight); 
 

 

 
    var geometry = new THREE.BoxGeometry(100, 100, 100); 
 
    var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); 
 
    var cube = new THREE.Mesh(geometry, material); 
 
    cube.rotation.y = Math.PI * 0.35; 
 
    scene.add(cube); 
 

 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    container.appendChild(renderer.domElement); 
 

 
    document.addEventListener('mousemove', onDocumentMouseMove, false); 
 

 
    // 
 

 
    window.addEventListener('resize', onWindowResize, false); 
 

 
} 
 

 
function onWindowResize() { 
 

 
    windowHalfX = window.innerWidth/2; 
 
    windowHalfY = window.innerHeight/2; 
 

 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 

 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
} 
 

 
function onDocumentMouseMove(event) { 
 

 
    mouseX = (event.clientX - windowHalfX)/2; 
 
    mouseY = (event.clientY - windowHalfY)/2; 
 

 
} 
 

 
// 
 

 
function animate() { 
 

 
    requestAnimationFrame(animate); 
 
    render(); 
 

 
} 
 

 
function render() { 
 

 
    camera.position.x += (mouseX - camera.position.x) * .05; 
 
    camera.position.y += (- mouseY - camera.position.y) * .05; 
 

 
    camera.lookAt(scene.position); 
 

 
    renderer.render(scene, camera); 
 

 
    renderer.setClearColor(0x000000, 0); 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

来源

2016-03-01 CPAS

我可以将颜色从黑色更改为白色或我想要的每种颜色。这只是不透明，它不起作用 – CPAS

bug是代码要创建2 THREE.WebGLRenderer小号

第一个接近文件的顶部有阿尔法。但是实际使用的是在中间附近创建的，没有alpha。

删除第二个，它将开始工作

来源

2016-03-01 17:22:57 gman

three.js所透明背景完全不

回答

相关问题