JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import Stats from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/stats.module.js';
import { GUI } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/OBJLoader.js';
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/ShaderPass.js';
import { OutlinePass } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/OutlinePass.js';
import { FXAAShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/FXAAShader.js';
let container, stats;
let camera, scene, renderer, controls;
let composer, effectFXAA, outlinePass;
let selectedObjects = [];
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const obj3d = new THREE.Object3D();
const group = new THREE.Group();
const params = {
edgeStrength: 3.0,
edgeGlow: 0.0,
edgeThickness: 1.0,
pulsePeriod: 0,
rotate: false,
usePatternTexture: false
};
// Init gui
const gui = new GUI( { width: 300 } );
gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
outlinePass.edgeStrength = Number( value );
} );
gui.add( params, 'edgeGlow', 0.0, 1 ).onChange( function ( value ) {
outlinePass.edgeGlow = Number( value );
} );
gui.add( params, 'edgeThickness', 1, 4 ).onChange( function ( value ) {
outlinePass.edgeThickness = Number( value );
} );
gui.add( params, 'pulsePeriod', 0.0, 5 ).onChange( function ( value...