ThreeJS Example webgl_framebuffer_texture copyFramebufferToTexture

dpr与texturesize

const dpr = window.devicePixelRatio;
const textureSize = 128 * dpr; //128是指网页的128

宽/高

const width = window.innerWidth;
const height = window.innerHeight;

正交相机/透视相机

camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );//宽/长
camera.position.z = 20;

cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 ); //左右 上下
cameraOrtho.position.z = 10;

添加线

const points = GeometryUtils.gosper( 8 );

const geometry = new THREE.BufferGeometry();
const positionAttribute = new THREE.Float32BufferAttribute( points, 3 );
geometry.setAttribute( 'position', positionAttribute );
geometry.center();  //center 源码

const colorAttribute = new THREE.BufferAttribute( new Float32Array( positionAttribute.array.length ), 3 );
colorAttribute.setUsage( THREE.DynamicDrawUsage );//源码
geometry.setAttribute( 'color', colorAttribute );

const material = new THREE.LineBasicMaterial( { vertexColors: true } );

line = new THREE.Line( geometry, material );
line.scale.setScalar( 0.05 );
scene.add( line );

sprite大小填充整个sceneOrtho场景

const spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set( textureSize, textureSize, 1 );
sceneOrtho.add( sprite );

const halfWidth = window.innerWidth / 2;
const halfHeight = window.innerHeight / 2;
const halfImageWidth = textureSize / 2;
const halfImageHeight = textureSize / 2;
sprite.position.set( - halfWidth + halfImageWidth, halfHeight - halfImageHeight, 1 );
//正交空间

声明空白Texture

const data = new Uint8Array( textureSize * textureSize * 3 );
texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

两个render意味着渲染两帧出来然后重叠在一起

renderer.clear();
renderer.render( scene, camera );
vector.x = ( window.innerWidth * dpr / 2 ) - ( textureSize / 2 );
vector.y = ( window.innerHeight * dpr / 2 ) - ( textureSize / 2 );
renderer.copyFramebufferToTexture( vector, texture ); //当前屏幕的位置进行截图
renderer.clearDepth();
renderer.render( sceneOrtho, cameraOrtho );