JSFiddle - React, Tailwind, and code Playground

JavaScript

import * as three from "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.module.js";

const target1 = new three.WebGLRenderTarget(2, 2, {
  type: three.FloatType,
  depthBuffer: true,
  stencilBuffer: false,
});
const target2 = new three.WebGLArrayRenderTarget(2, 2, 2, {
	type: three.FloatType,
  depthBuffer: true,
  stencilBuffer: false
});

console.log("three.FloatType:", three.FloatType);
console.log("three.UnsignedByteType:", three.UnsignedByteType);
console.log('target1:', target1.texture.type);
console.log('target2:', target2.texture.type);

target2.texture.type = three.FloatType;
console.log('target2-after:', target2.texture.type);

const renderer = new three.WebGLRenderer();
const gl = renderer.getContext();

const scene = new three.Scene();

const material = new three.MeshBasicMaterial();
material.onBeforeCompile = (shader) => {
	shader.fragmentShader = 'void main(){ gl_FragColor=vec4(0.123456789, 0, 0, 1); }'
};
const plane = new three.Mesh(new three.PlaneGeometry(10, 10, 1, 1), material);
const cam = new three.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
cam.position.set(0, 0, 1);
cam.lookAt(0, 0, 0);
scene.add(plane);
renderer.setRenderTarget(target2, 0);
renderer.render(scene, cam);
const buffer = new Float32Array(2 * 2 * 4);
renderer.readRenderTargetPixels(target2, 0, 0, 2, 2, buffer, 0);
console.log(buffer.join(' '));