Hi !!
I have a simple and efficient working example of Godray postprocessing using html script tags with the link: https://cdn.jsdelivr.net/npm/postprocessing@6.21.3/build/postprocessing.min.js
But when I use javascript modules I dont’ find the GodRaysEffect.js .
I’m import EffectComposer, RenderPass and ShaderPass too
It’ should be here?
I not intend use something complex like this example
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js" integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q==" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/postprocessing@6.21.3/build/min.js"></script>-->
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.127.0/build/three.module.js';
import Stats from 'https://unpkg.com/three@0.127.0/examples/jsm/libs/stats.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.127.0/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.127.0/examples/jsm/loaders/GLTFLoader.js';
import { EffectComposer } from 'https://unpkg.com/three@0.127.0/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://unpkg.com/three@0.127.0/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://unpkg.com/three@0.127.0/examples/jsm/postprocessing/ShaderPass.js';
//import { GodRaysEffect } from 'https://github.com/vanruesc/postprocessing/blob/83630bae23a8c7e1438369449a3bfbf5f4f3a8d6/src/effects/GodRaysEffect.js';
//import { GodRaysShader } from 'https://unpkg.com/three@0.127.0/examples/jsm/shaders/GodRaysShader.js';
let scene, camera, renderer, composer, controls;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x020202);
camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,10000);
camera.position.y = 510;
camera.position.z = 500;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new OrbitControls( camera, renderer.domElement );
controls.panSpeed = 0.1;
controls.rotateSpeed = 0.1;
controls.minDistance = 5;
controls.maxDistance = 20;
controls.enableDamping = true;
controls.dampingFactor = 0.5;
const ambientLight = new THREE.AmbientLight( 0x404040 ); // soft white light
ambientLight.intensity = 1.;
scene.add( ambientLight );
let pointLight = new THREE.PointLight(0xffccaa,3);
pointLight.position.set(0,0,-1);
scene.add(pointLight);
let pointLightFront = new THREE.PointLight(0xffffff, 1.05);
pointLightFront.position.set(0.0, 100, 100);
pointLightFront.intensity = 0;
pointLightFront.decay = 30;
pointLightFront.power = 10;
scene.add(pointLightFront);
const pLighthelper = new THREE.PointLightHelper(pointLightFront);
scene.add(pLighthelper);
let circleGeo = new THREE.CircleGeometry(100,50);
let circleMat = new THREE.MeshBasicMaterial({color: 0xffccaa});
let circle = new THREE.Mesh(circleGeo, circleMat);
circle.position.set(0 ,100 ,-500);
//circle.scale.setX(1.2);
scene.add(circle);
let godraysEffect = new GodRaysEffect(camera, circle, {
resolutionScale: 1,
blurriness: 0,
density: 0.8,
decay: 0.92,
weight: 0.45,
exposure: 0.75,
samples: 60
});
let renderPass = new RenderPass(scene, camera);
let effectPass = new EffectPass(camera,godraysEffect);
effectPass.renderToScreen = true;
composer = new EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectPass);
const geometryBox = new THREE.BoxGeometry( 3, 3, 3 );
const material = new THREE.MeshPhongMaterial( {color: 0x202020} );
cube = new THREE.Mesh( geometryBox, material );
//cube.position.set(0.0, 0.0, -1)
var gui = new dat.GUI( { width: 300 } );
gui.addColor(pointLightFront, 'color', '0xFFFFFF').name('color');
gui.add(pointLightFront, 'intensity', 0, 2, 0.01);
gui.add(pointLightFront, 'distance', 0, 40).onChange( pLighthelper.update());
}
function animate() {
controls.update();
composer.render();
//renderer.render( scene, camera );
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>