render-target.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <!-- Licensed under a BSD license. See license.html for license -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  7. <title>Three.js - Responsive</title>
  8. <style>
  9. html, body {
  10. height: 100%;
  11. margin: 0;
  12. }
  13. #c {
  14. width: 100%;
  15. height: 100%;
  16. display: block;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <canvas id="c"></canvas>
  22. </body>
  23. <!-- Import maps polyfill -->
  24. <!-- Remove this when import maps will be widely supported -->
  25. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  26. <script type="importmap">
  27. {
  28. "imports": {
  29. "three": "../../build/three.module.js"
  30. }
  31. }
  32. </script>
  33. <script type="module">
  34. import * as THREE from 'three';
  35. function main() {
  36. const canvas = document.querySelector('#c');
  37. const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
  38. const rtWidth = 512;
  39. const rtHeight = 512;
  40. const renderTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight);
  41. const rtFov = 75;
  42. const rtAspect = rtWidth / rtHeight;
  43. const rtNear = 0.1;
  44. const rtFar = 5;
  45. const rtCamera = new THREE.PerspectiveCamera(rtFov, rtAspect, rtNear, rtFar);
  46. rtCamera.position.z = 2;
  47. const rtScene = new THREE.Scene();
  48. rtScene.background = new THREE.Color('red');
  49. {
  50. const color = 0xFFFFFF;
  51. const intensity = 1;
  52. const light = new THREE.DirectionalLight(color, intensity);
  53. light.position.set(-1, 2, 4);
  54. rtScene.add(light);
  55. }
  56. const boxWidth = 1;
  57. const boxHeight = 1;
  58. const boxDepth = 1;
  59. const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  60. function makeInstance(geometry, color, x) {
  61. const material = new THREE.MeshPhongMaterial({color});
  62. const cube = new THREE.Mesh(geometry, material);
  63. rtScene.add(cube);
  64. cube.position.x = x;
  65. return cube;
  66. }
  67. const rtCubes = [
  68. makeInstance(geometry, 0x44aa88, 0),
  69. makeInstance(geometry, 0x8844aa, -2),
  70. makeInstance(geometry, 0xaa8844, 2),
  71. ];
  72. const fov = 75;
  73. const aspect = 2; // the canvas default
  74. const near = 0.1;
  75. const far = 5;
  76. const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  77. camera.position.z = 2;
  78. const scene = new THREE.Scene();
  79. {
  80. const color = 0xFFFFFF;
  81. const intensity = 1;
  82. const light = new THREE.DirectionalLight(color, intensity);
  83. light.position.set(-1, 2, 4);
  84. scene.add(light);
  85. }
  86. const material = new THREE.MeshPhongMaterial({
  87. map: renderTarget.texture,
  88. });
  89. const cube = new THREE.Mesh(geometry, material);
  90. scene.add(cube);
  91. function resizeRendererToDisplaySize(renderer) {
  92. const canvas = renderer.domElement;
  93. const width = canvas.clientWidth;
  94. const height = canvas.clientHeight;
  95. const needResize = canvas.width !== width || canvas.height !== height;
  96. if (needResize) {
  97. renderer.setSize(width, height, false);
  98. }
  99. return needResize;
  100. }
  101. function render(time) {
  102. time *= 0.001;
  103. if (resizeRendererToDisplaySize(renderer)) {
  104. const canvas = renderer.domElement;
  105. camera.aspect = canvas.clientWidth / canvas.clientHeight;
  106. camera.updateProjectionMatrix();
  107. }
  108. // rotate all the cubes in the render target scene
  109. rtCubes.forEach((cube, ndx) => {
  110. const speed = 1 + ndx * .1;
  111. const rot = time * speed;
  112. cube.rotation.x = rot;
  113. cube.rotation.y = rot;
  114. });
  115. // draw render target scene to render target
  116. renderer.setRenderTarget(renderTarget);
  117. renderer.render(rtScene, rtCamera);
  118. renderer.setRenderTarget(null);
  119. // rotate the cube in the scene
  120. cube.rotation.x = time;
  121. cube.rotation.y = time * 1.1;
  122. // render the scene to the canvas
  123. renderer.render(scene, camera);
  124. requestAnimationFrame(render);
  125. }
  126. requestAnimationFrame(render);
  127. }
  128. main();
  129. </script>
  130. </html>