three.js 배경을 투명 또는 다른 색상으로 변경

내 캔버스의 기본 배경색 인 것처럼 보이는 것을 검정색에서 투명 / 다른 색상으로 변경하려고 시도했지만 운이 없습니다.

내 HTML :

<canvas id="canvasColor">

내 CSS :

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

다음 온라인 예제에서 볼 수 있듯이 캔버스에 애니메이션이 추가되어 있으므로 불투명도를 수행 할 수 없습니다. 0; 이드에.

실시간 미리보기 : http://devsgs.com/preview/test/particle/

기본 검정을 덮어 쓰는 방법에 대한 아이디어가 있습니까?

나는 three.js를 사용하기 시작했을 때 이것을 발견했습니다. 실제로는 자바 스크립트 문제입니다. 현재 보유하고있는 항목 :

renderer.setClearColorHex( 0x000000, 1 );

당신의 threejs초기화 함수입니다. 다음으로 변경하십시오.

renderer.setClearColorHex( 0xffffff, 1 );

업데이트 : 업데이트 된 솔루션에 대해 HdN8에 감사드립니다.

renderer.setClearColor( 0xffffff, 0);

업데이트 # 2 : WestLangley가 또 다른 유사한 질문 에서 지적했듯이 -이제 setClearColor()함수 와 함께 새 WebGLRenderer 인스턴스를 만들 때 아래 코드를 사용해야합니다 .

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

업데이트 # 3 : Mr.doob r78은 대신 아래 코드를 사용하여 장면의 배경색을 설정할 수 있다고 지적합니다 .

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

전체 답변 : (r71로 테스트)

배경색을 설정하려면 다음을 사용하십시오.

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

투명한 배경을 원한다면 먼저 렌더러에서 알파를 활성화해야합니다.

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

자세한 내용 은 문서 를 참조하세요.

투명성을 위해 이것은 또한 필수입니다 : three.js가있는 투명 배경을renderer = new THREE.WebGLRenderer( { alpha: true } ) 통해

three.js 편집기를 통해 장면을 만들 때 정답 코드 (위)를 사용해야 할뿐만 아니라 알파 값과 선명한 색상으로 렌더러를 설정해야 할뿐만 아니라 앱으로 이동해야한다는 것을 알았습니다. .json 파일을 열고 "Scene"개체의 "background"속성을 찾아 다음으로 설정합니다 "background: null"..

Three.js 편집기에서 내보내기는 원래 "배경"으로 설정되었습니다. 0

2020 년에 r115를 사용하면 다음과 같이 매우 잘 작동합니다.

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

또한 three.js 편집기를 사용하는 경우 index.html에서도 배경색을 지우도록 설정하는 것을 잊지 마십시오.

background-color:#00000000