JSFiddle - React, Tailwind, and code Playground
by frogman_pep
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<script type="module">
import * as THREE from './module/three.module.js';
import { OrbitControls } from './module/OrbitControls.js';
import { GLTFLoader } from './module/GLTFLoader.js';
import { RoughnessMipmapper } from './module/RoughnessMipmapper.js';
import {MeshBasicMaterial, Mesh, sRGBEncoding, Sprite, SpriteMaterial, TextureLoader, Vector3 } from './module/three.module.js';
var container = document.getElementById( 'container' );
var renderer, scene, camera;
window.addEventListener( 'load', init );
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color (0x2d2d2d);
camera = new THREE.PerspectiveCamera( 12, window.innerWidth / window.innerHeight, .2, 6 );
camera.position.set( - 2.8, 0.0, -1.0 );
var controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 2;
controls.maxDistance = 4.9;
controls.target.set( 0, 0, 0 );
controls.update();
scene.add( new THREE.AmbientLight( 0x443333 ) );
var light = new THREE.DirectionalLight( 0xffddcc, 1 );
light.position.set( 1, 0.75, 0.5 );
scene.add( light );
var light = new THREE.DirectionalLight( 0xccccff, 1 );
light.position.set( - 1, 0.75, - 0.5 );
scene.add( light );
loadLeePerrySmith();
window.addEventListener( 'resize', onWindowResize, false );
onWindowResize();
animate();
}
function loadLeePerrySmith()...