import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
import { LuminosityHighPassShader } from "three/examples/jsm/shaders/LuminosityHighPassShader.js";
import { CopyShader } from "three/examples/jsm/shaders/CopyShader.js";
import { Reflector} from "three/examples/jsm/objects/Reflector";
import {MeshReflectorMaterial} from '../../MeshReflectorMaterial';
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer({
antialias: true,
})
renderer.shadowMap.enabled = true
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
// renderer.toneMapping = THREE.ACESFilmicToneMapping;
// renderer.toneMappingExposure = 1;
renderer.setClearColor(0xffffff, 1);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const scene = new THREE.Scene();
const renderScene = new RenderPass( scene, camera );
// ========Enable Bloom========
const params = {
exposure: 1,
bloomStrength: 5,
bloomThreshold: 0,
bloomRadius: 0
};
const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
const bloomComposer = new EffectComposer( renderer );
bloomComposer.renderToScreen = false;
bloomComposer.addPass( renderScene );
bloomComposer.addPass( bloomPass );
const finalPass = new ShaderPass(
new THREE.ShaderMaterial( {
uniforms: {
baseTexture: { value: null },
bloomTexture: { value: bloomComposer.renderTarget2.texture }
},
vertexShader:` varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
uniform sampler2D baseTexture;
uniform sampler2D bloomTexture;
varying vec2 vUv;
void main() {
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
}`,
defines: {}
} ), "baseTexture"
);
finalPass.needsSwap = true;
const finalComposer = new EffectComposer( renderer );
finalComposer.addPass( renderScene );
finalComposer.addPass( finalPass );
// ========Enable Bloom End========
// scene.background = new THREE.Color(0xffffff);
camera.position.set(0, 0, 8);
const orbit = new OrbitControls(camera, renderer.domElement);
// orbit.autoRotate = true;
// console.log(orbit.autoRotate);
// orbit.autoRotateSpeed = 0.5;
orbit.enableDamping = true;
// const pointLightShadow = new THREE.PointLight(0xffffff, 1);
// pointLightShadow.castShadow = true;
// pointLightShadow.shadow.mapSize.width = 4096;
// pointLightShadow.shadow.mapSize.height = 4096;
// pointLightShadow.position.set(30, 10, 10);
// scene.add(pointLightShadow);
// const pointLight = new THREE.PointLight(0xffffff, .9);
// pointLight.position.set(10, 0, 10);
// pointLight.castShadow = true;
// scene.add(pointLight);
// =====plane behind
// const bgTexture = new THREE.TextureLoader().load("./texture-bg.jpg");
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(10, 10))
plane.position.y = -0.5
plane.rotation.x = -Math.PI / 2
scene.add(plane)
plane.material = new MeshReflectorMaterial(renderer, camera, scene, plane, {
resolution: 1024,
blur: [512, 128],
mixBlur: 2.5,
mixContrast: 1.5,
mirror: 1
});
// const textureLoader = new THREE.TextureLoader();
// const normalMapTexture = textureLoader.load("./assets/normalMap.jpg");
// normalMapTexture.wrapS = THREE.RepeatWrapping;
// normalMapTexture.wrapT = THREE.RepeatWrapping;
// normalMapTexture.repeat.set(1, 1);
// const groundMirror = new THREE.Reflector( bgGeometry, {
// clipBias: 0.001,
// textureWidth: window.innerWidth * window.devicePixelRatio,
// textureHeight: window.innerHeight * window.devicePixelRatio,
// color: 0x777777,
// blending: THREE.AdditiveBlending,
// blur: 100,
// resolution: 2048,
// metalness: 0.5,
// mixBlur: 1,
// roughness: 1,
// depthScale: 1.2,
// minDepthThreshold0: 0.4,
// maxDepthThreshold: 1.4
// // normalScale: new THREE.Vector2(1),
// // normalMap: normalMapTexture,
// // clearcoatNormalMap: normalMapTexture,
// // clearcoatNormalScale: new THREE.Vector2(0.3)
// } );
// groundMirror.position.y = -0.01;
// groundMirror.rotateX( - Math.PI / 2 );
// groundMirror.receiveShadow = true
// scene.add( groundMirror );
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2);
scene.add(ambientLight);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 20, 20);
light.castShadow = true
scene.add(light);
// let envMap;
// let envmapLoader = new THREE.PMREMGenerator(renderer)
// const hdrEquirect = new THREE.RGBELoader().load(
// "./empty_warehouse_01_4k.hdr",
// () => {
// hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
// envMap = envmapLoader.fromCubemap(hdrEquirect)
// }
// );
// ==========Adding 3D Model==========
let robot = null;
new THREE.GLTFLoader().load("./assets/ford_mustang_shelby_gt500/scene.gltf", (gltf) => {
robot = gltf.scene;
robot.position.set(0, 0, -2);
robot.traverse(function (model) {
if (model.isMesh) {
model.castShadow = true;
}
});
robot.getObjectByName("GT500Body_carpaint_0").material.color.setHex(0xffffff)
scene.add(robot);
});
const clock = new THREE.Clock()
let lastElapsedTime = 0;
// animate
function animate(time) {
orbit.update();
const elapsedTime = clock.getElapsedTime()
const deltaTime = elapsedTime - lastElapsedTime;
lastElapsedTime = elapsedTime;
bloomComposer.render();
finalComposer.render();
renderer.render(scene, camera)
// camera.lookAt(scene.position);
}
renderer.setAnimationLoop(animate);
// resize code
window.addEventListener('resize', function () {
const dpr = Math.min(pixelRatio, 2); // Cap DPR scaling to 2x
// ====Enable Bloom Pass====
// bloomPass.resolution.set(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(dpr);
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setPixelRatio(dpr);
composer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight)
})
This is my whole three js code
. It is working like a charm and it is very easy to use it. It suports the blur with depth based fade.
