go to the codepen from #18840 and paste following code in (sorry, dont have an account and cant save codepens):
import {
AxesHelper,
Color,
CubeCamera,
HemisphereLight,
LinearEncoding,
MeshStandardMaterial,
Mesh,
PerspectiveCamera,
PMREMGenerator,
sRGBEncoding,
SphereGeometry,
Scene,
UnsignedByteType,
WebGLRenderer
} from "https://cdn.jsdelivr.net/npm/three@0.114.0/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/controls/OrbitControls.js";
import { RGBELoader } from "https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/RGBELoader.js";
const envMapURL =
"https://rawcdn.githack.com/mrdoob/three.js/3a7b71e0f47fb105e1ecd63b152f1c09fac6d015/examples/textures/equirectangular/royal_esplanade_1k.hdr";
async function init() {
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = sRGBEncoding;
document.body.appendChild(renderer.domElement);
const pmremGenerator = new PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
const scene = new Scene();
scene.background = new Color(0x4285f4);
const camera = new PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.set(20, 20, 20);
new OrbitControls(camera, renderer.domElement);
const geometry = new SphereGeometry(5, 12, 8);
const material = new MeshStandardMaterial({
// create all colors this way
// if you are trying to match CSS or photo colors
color: new Color(0x4285f4).convertSRGBToLinear(),
metalness: 1, roughness: 0
});
const mesh = new Mesh(geometry, material);
const envMap = await loadEnvironment();
const envMapPMREM = createPMREM(pmremGenerator, envMap);
scene.background = envMapPMREM;
scene.environment = envMapPMREM;
const cubeCamera = new CubeCamera(1, 2, 512);
cubeCamera.update(renderer, scene);
scene.background = cubeCamera.renderTarget;
scene.add(mesh);
scene.add(new AxesHelper(20));
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
});
}
async function loadEnvironment() {
const loader = new RGBELoader().setDataType(UnsignedByteType);
return new Promise((resolve, reject) => {
loader.load(envMapURL, data => resolve(data), null, reject);
});
}
function createPMREM(pmremGenerator, texture) {
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
texture.dispose();
pmremGenerator.dispose();
return envMap;
}
init();
(what you get by commenting scene.background = cubeCamera.renderTarget;
out)
1 possible answer(s) on “CubeCamera washes out the colors”