렌더러의 배경은 투명하지만 셰이프는 아닙니다. three.js

나는 정적 인 배경 이미지를 보여주고 렌더러가 그 위에 셰이프를 움직이는 곳에서 three.js를 사용하고 있습니다. 이렇게하는 이유는 모양에 영향을주지 않고 렌더러를 자유롭게 회전시키기 위해서입니다. 문제는 렌더러 뒤에 백그라운드가 있기 때문에 내 질문입니다. 배경 이미지를 완전히보기 위해 렌더러의 "배경"을 투명하게 (셰이프가 계속 표시되도록) 만들 수 있습니까?렌더러의 배경은 투명하지만 셰이프는 아닙니다. three.js

것들 나는 시도했다 :

이 렌더러의 setClearColor 방법으로 RGBA에 대한 투명성을 설정, 렌더링의 domElement
에 불투명도를 설정

여기에 단순화 된 fiddle 그리고 당신은 평방 것을 볼 수 있습니다 (따라서 렌더러)가 배경을 덮고있다.

var square = new THREE.Shape(); 
square.moveTo(0, 0); 
square.lineTo(0, length); 
square.lineTo(length, length); 
square.lineTo(length, 0); 
square.lineTo(0, 0); 

var geometry = new THREE.ShapeGeometry(square); 
var material = new THREE.MeshBasicMaterial({ 
    color: 'rgb(59, 89, 152)', 
    opacity: 1, 
    transparent: true 
}); 

var mesh = new THREE.Mesh(geometry, material); 
mesh.position.x = 50; 
mesh.position.y = 50; 
scene.add(mesh); 

// and the camera 
scene.add(camera); 

renderer.render(scene, camera);

출처

2013-12-09 Martavis P.

당신은 webGLRendereralpha 매개 변수를 설정해야합니다.

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

기본값으로 선명한 색상을 유지할 수 있습니다.

renderer.setClearColor(0x000000, 0); // the default

업데이트 바이올린 : http://jsfiddle.net/7McS2/3/ 또는 http://jsfiddle.net/7McS2/4/

three.jr r.63

출처

2013-12-09 19:06:43 WestLangley

오, 세상에! 당신은 생명의 은인입니다! 렌더러를 시작할 때 "alpha : true"옵션이 누락되었습니다. 내가 이것을 설정해야한다는 것을 알지 못했고 왜 ClearColor 메서드에서 알파를 설정하는 것이 효과적이지 않은지 궁금합니다. 감사!!! –

EffectComposer로 후 처리를 적용하자마자 투명도가 깨집니다. – zakdances

예 - 정적 배경에 대한 훌륭한 솔루션입니다. 이것이 성능에 어떤 영향을 미치는지는 확실치 않지만 배경을 렌더링하기 위해 다른 장면을 설정하는 다른 솔루션은 과도한 것처럼 보입니다. (분명히 EffectComposer를 사용하지 않는 한). – gregpress

렌더러의 배경은 투명하지만 셰이프는 아닙니다. three.js

답변

관련 문제