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

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

---

캔버스의 기본 배경색을 검은 색에서 투명 / 다른 색으로 변경하려고했지만 운이 없습니다.

내 HTML :

<canvas id="canvasColor">

내 CSS :

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

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

실시간 미리보기 : 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"Object의 "background"속성을 찾아서 다음과 같이 설정하십시오 "background: null".

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

---

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

background-color:#00000000

참고 URL : https://stackoverflow.com/questions/16177056/changing-three-js-background-to-transparent-or-other-color