JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<!--script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script-->

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.setScalar(10);
scene.add(light);

var planeGeom = new THREE.PlaneGeometry(10, 10, 100, 100);
planeGeom.rotateX(Math.PI * -0.5);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load("https://threejs.org/examples/models/obj/ninja/displacement.jpg");
console.log(texture);
textureLoader.setCrossOrigin("anonymous");
var planeMat = new THREE.MeshStandardMaterial({
  color: "green",
  displacementMap: texture,
  displacementScale: 2,
  displacementBias: 0,
  alphaMap: texture,
  transparent: true,
  wireframe: true
});
var plane = new THREE.Mesh(planeGeom, planeMat);
plane.position.x = -6;
scene.add(plane);

var planeJSGeom = new THREE.PlaneGeometry(10, 10, 100, 100);
planeJSGeom.rotateX(Math.PI * -0.5);
var planeJS = new THREE.Mesh(planeJSGeom, new THREE.MeshStandardMaterial({
  color: "aqua",
  alphaMap: texture,
  transparent: true,
  wireframe: true
}));
planeJS.position.x = 6;
scene.add(planeJS);

textureLoader.load("https://threejs.org/examples/models/obj/ninja/displacement.jpg", function(t) {

  var canvas = document.createElement("canvas");
  canvas.width = t.image.width;
  canvas.height = t.image.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(t.image, 0, 0, t.image.width, t.image.height);

  var wdth = planeJSGeom.parameters.widthSegments + 1;
  var hght = planeJSGeom.parameters.heightSegments + 1;
  var...