three.js dev template - module
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
import * as THREE from 'https://rawgit.com/mrdoob/three.js/dev/build/three.module.js';
import { OrbitControls } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/loaders/RGBELoader.js';
import { PMREMGenerator } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/pmrem/PMREMGenerator.js';
import { PMREMCubeUVPacker } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/pmrem/PMREMCubeUVPacker.js';
var container, stats, controls;
var camera, scene, renderer;
var raycaster, mouse;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.9, 2.7 );
scene = new THREE.Scene();
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2()
new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setPath( 'https://rawgit.com/mrdoob/three.js/dev/examples/textures/equirectangular/' )
.load( 'pedestrian_overpass_2k.hdr', function ( texture ) {
var options = {
minFilter: texture.minFilter,
magFilter: texture.magFilter
};
scene.background = new THREE.WebGLRenderTargetCube( 1024, 1024, options ).fromEquirectangularTexture( renderer, texture );
var pmremGenerator = new PMREMGenerator( scene.background.texture );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
// model
var loader = new GLTFLoader().setPath( 'https://rawgit.com/mrdoob/three.js/dev/examples/models/gltf/DamagedHelmet/glTF/' );
loader.load( 'DamagedHelmet.gltf', function ( gltf )...