Render to texture

simple

by jmcjc5u

HTML

<div id="info">Render to Texture</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

body {
  background-color: #fff;
  color: #111;
  margin: 0px;
  overflow: hidden;
  font-family: Monospace;
  font-size: 10px;
  position: absolute;
}

#info {
  position: absolute;
  top: 3%;
  width: 100%;
  padding: 5px;
  text-align: center;
  color: #ffff00
}

JavaScript

var renderer, camera;
var scene, sceneRTT, renderTarget, mesh;
var angle = 0;

init();
animate();

function init() {

	renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 80;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var ambientLight = new THREE.AmbientLight(0x555555);
  scene.add(ambientLight);

  window.addEventListener('resize', onWindowResize, false);

  /////////////////////////////////////////////////////////
  // render a rotating teapot to texture
  // then apply the texture to a quad

  sceneRTT = new THREE.Scene();
  let pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.set(0, 300, 200);
  sceneRTT.add(pointLight);

  renderTarget = new THREE.WebGLRenderTarget(
    1024, 1024, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter,
      format: THREE.RGBFormat
    }
  );

  mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(2, .4, 100, 16),
    new THREE.MeshLambertMaterial({
      color: 0xff1234
    }));
  mesh.scale.set(32, 32, 32);
  sceneRTT.add(mesh);

	let plane = new THREE.PlaneBufferGeometry(300, 300);
  let quad = new THREE.Mesh(plane,
    new THREE.MeshBasicMaterial({
     map: renderTarget.texture,
      side: THREE.DoubleSide
    }));
  scene.add(quad);
  
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function checkRenderTarget() {
	debugger;
	console.log (renderTarget.texture.image)
}

function animate() {
  angle += 0.005;

  requestAnimationFrame(animate);

  mesh.rotation.y = -angle;

  // render...