[bug] three.js volumetric rendering onto fullscreen quad with perspective camera

by ugurkoysuren

HTML

<script src="https://cdn.skypack.dev/pin/urdf-loader@v0.10.2-PTri4xPOSiTFffAlWPGI/mode=imports/optimized/urdf-loader.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/urdf-loader@0.10.2/umd/URDFLoader.js"></script>


<canvas id="canvas"></canvas>

CSS

html, body, #canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(120, canvas.width / canvas.height, 1, 1000);

var clock = new THREE.Clock();

const manager = new THREE.LoadingManager();
const loader = new URDFLoader( manager );

loader.load(
  'https://raw.githubusercontent.com/ros/urdf_tutorial/ros1/urdf/07-physics.urdf',                    // The path to the URDF within the package OR absolute
  robot => {
  console.log(robot)

    // The robot is loaded!
    scene.add(robot);

  },undefined,
  (err)=>{
  console.log(err)
  }
);



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

camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

render();

function render() {
  requestAnimationFrame(render);
  
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  renderer.render(scene, camera);
}