Three.js 배경을 투명하게 하거나 사용자 정의 색상으로 만들려면 어떻게 해야 합니까?

투명하거나 다채로운 Three.js 배경: 솔루션

기본적으로 Three.js 캔버스의 배경은 검정색으로 렌더링됩니다. 그러나 시각화를 향상시키기 위해 투명하거나 사용자 정의 색상 배경을 원할 수도 있습니다. 배경 변경 시도가 성공하지 못한 경우 이 기사에서 해결책을 탐색합니다.

문제

사용자가 설명한 대로 CSS 불투명도를 사용하여 배경색을 설정합니다. 배경 속성은 캔버스에 영향을 주지 않습니다. 이는 검정색 배경이 Three.js 자체에 의해 렌더링되기 때문입니다.

해결책

해결책은 Three.js 코드 내에서 다음 설정을 조작하는 데 있습니다.

renderer.setClearColorHex(0x000000, 1);

투명한 배경을 얻으려면 위 줄을 변경하세요. 대상:

renderer.setClearColor(0xffffff, 0);

그러나 이번 변경은 투명성만을 보장합니다. 장면이 표시되지 않습니다. 투명한 배경으로 장면을 렌더링하려면 알파 속성이 true로 설정된 WebGLRenderer를 사용해야 합니다.

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

사용자 정의 색상 배경의 경우 다음 코드를 사용할 수 있습니다.

renderer.setClearColorHex(0xff0000, 1);

또는 배경색을 THREE.Color로 설정할 수도 있습니다. object:

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

이러한 변경 사항을 구현하면 이제 Three.js 시각화의 배경이 투명하든 원하는 색상이든 제어할 수 있습니다.

위 내용은 Three.js 배경을 투명하게 하거나 사용자 정의 색상으로 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!