JSFiddle - React, Tailwind, and code Playground
HTML
<button id="save">
Save Screenshot
</button>
CSS
body {
margin: 0;
}
button {
position: absolute;
}
JavaScript
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.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 { RGBShiftShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/RGBShiftShader.js';
import { DotScreenShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/DotScreenShader.js';
let camera, renderer, composer;
let object;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
const scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
object = new THREE.Object3D();
scene.add( object );
const geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for ( let i = 0; i < 100; i ++ ) {
const mesh = new THREE.Mesh( geometry, material );
mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
mesh.position.multiplyScalar( Math.random() * 400 );
mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
object.add( mesh );
}
scene.add( new THREE.AmbientLight( 0x222222 ) );
const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
//...