three.js dev template - module
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
import * as THREE from "https://threejs.org/build/three.module.js";
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { EffectComposer } from 'https://threejs.org/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://threejs.org/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://threejs.org/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'https://threejs.org/examples/jsm/postprocessing/OutlinePass.js';
import { FXAAShader } from 'https://threejs.org/examples/jsm/shaders/FXAAShader.js';
import { GammaCorrectionShader } from 'https://threejs.org/examples/jsm/shaders/GammaCorrectionShader.js';
var container, stats;
var camera, scene, renderer, controls;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var selectedObjects = [];
var composer, effectFXAA, outlinePass;
var obj3d = new THREE.Object3D();
var group = new THREE.Group();
var params = {
edgeStrength: 3.0,
edgeGlow: 0.0,
edgeThickness: 1.0,
pulsePeriod: 0,
rotate: false,
usePatternTexture: false
};
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGL1Renderer();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
// todo - support pixelRatio in this demo
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf2f7ff);
camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000 );
camera.position.set( 0, 0, 8 );
controls = new...