Mapping in-fidelity in quadrilateral rendering

Note how straight lines of the texture are being rendered as zig-zag lines

by Chrisssie

HTML

<script type="importmap">
          {
            "imports": {
              "three": "https://unpkg.com/[email protected]/build/three.module.js",
              "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
            }
          }
        </script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Simple three.js example
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

var renderer, scene, camera, controls;

let testMesh, testMaterial, testGeometry;

const PI_180 = Math.PI / 180.0;
const points = [];

let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
let ambientLight, light;
let parameters;
let shading = '';
let latheSegments = 0;


init();
animate();
//render();

function init() {

    // camera
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 60, 0);


// renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputEncoding = THREE.sRGBEncoding;
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

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


  // light
  ambientLight = new THREE.AmbientLight(0xffffff);

  light = new THREE.DirectionalLight(0xffffff, 5);
  light.position.set(32, -39, 70);
  
  scene.add( ambientLight );
  scene.add( light );

  // axes
  scene.add(new THREE.AxesHelper(40));

  // Textures

  const textureEquirec = new THREE.TextureLoader().load( "https://live.staticflickr.com/65535/51613416113_dda7a692f0_o.jpg" );
  textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
  textureEquirec.encoding = THREE.sRGBEncoding;

  const textureMap = new THREE.TextureLoader().load( "https://live.staticflickr.com/65535/51613862444_580840bab6_o.jpg" );
  textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
  textureMap.anisotropy = 16;
  textureMap.encoding = THREE.sRGBEncoding;
  
//  scene.background = textureEquirec;
  
  // initialize points[] array for use in THREE.LatheGeometry

  points.length = 0;
 ...