JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - Node Material Normal Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/deprecated/LegacyJSONLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/EquirectangularToCubeGenerator.js"></script>
<script src="https://threejs.org/examples/js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="https://threejs.org/examples/js/pmrem/PMREMGenerator.js"></script>
<script type="module">
import 'https://threejs.org/examples/js/nodes/THREE.Nodes.js';
var container = document.getElementById('container');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.gammaOutput = true;
container.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 10000);
var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.screenSpacePanning = true;
// Set up camera
camera.position.set(28.068, 27.589, 62.657);
camera.up.set(0, 1, 0);
var target = new THREE.Vector3(-0.954, 2.873, -0.774);
cameraControls.target.copy(target);
cameraControls.update();
// Load envmap
var envmap1 = null;
var envmap2 = null;
var filepath...
CSS
body {
color: #fff;
font-family: Monospace;
font-size: 13px;
text-align: center;
background-color: #000;
margin: 0px;
overflow: hidden;
}
#container {
background-color: #000;
width: 100%;
height: 100%;
}