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所透明背景完全不

回答

相關問題