I have added post-processing in gltf model on mouse over but it is not showing anything-
Code-
import { Component, Input ,Output, EventEmitter, OnInit} from ‘@angular/core’;
import * as THREE from ‘three’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;
import { RGBELoader } from ‘three/examples/jsm/loaders/RGBELoader.js’;
import Stats from ‘three/examples/jsm/libs/stats.module’;
import { TWEEN } from ‘three/examples/jsm/libs/tween.module.min’;
import { RoughnessMipmapper } from ‘three/examples/jsm/utils/RoughnessMipmapper.js’;
import { CSS2DRenderer, CSS2DObject } from ‘three/examples/jsm/renderers/CSS2DRenderer.js’;//(to be used later);
import { EffectComposer } from ‘three/examples/jsm/postprocessing/EffectComposer.js’;
import { RenderPass } from ‘three/examples/jsm/postprocessing/RenderPass.js’;
import { ShaderPass } from ‘three/examples/jsm/postprocessing/ShaderPass.js’;
import { FXAAShader } from ‘three/examples/jsm/shaders/FXAAShader.js’;
import { OutlinePass } from ‘three/examples/jsm/postprocessing/OutlinePass.js’ //(to be used later);
import { GUI } from ‘three/examples/jsm/libs/dat.gui.module.js’;
@Component({
selector: ‘espo-app’,
templateUrl:’./expoview.component.html’,
styleUrls: [’./expoview.component.css’]
})
export class ExpoViewComponent implements OnInit {
name = ‘Expoview’;
private scene;
private rgbLoader;
private controls;
private annotations;
private raycaster;
private sceneMeshes;
private stats;
private labelRenderer;
private mixer;
private model;
private ignorObj;
private camera;
private renderer;
private teen;
private clock;
private container;
private composer ;
private outlinePass;
private selectedObjects;
private envMap;
private texture;
private pmremGenerator;
public annotationMarkers: THREE.Sprite[] = []; // (to be used later)
private progressBar;
constructor() {
this.annotations;
this.sceneMeshes;
this.stats;
this.labelRenderer;
this.rgbLoader;
this.mixer;
this.model;
this.container;
this.texture;
this.envMap;
this.pmremGenerator;
this.progressBar;
this.ignorObj = ['Material #2']; // (to be used later)
this.scene = new THREE.Scene();
this.scene.background = null ;//'0xffffff';
this.selectedObjects = [];
this.raycaster = new THREE.Raycaster();
this.teen = new TWEEN.Tween();
this.clock = new THREE.Clock();
this.camera = new THREE.PerspectiveCamera(20,window.innerWidth / window.innerHeight,0.1,1000);
this.renderer = new THREE.WebGLRenderer({
antialias: true //alpha: true
});
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
this.composer = new EffectComposer( this.renderer );
this.outlinePass;// = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), this.scene, this.camera );
}
async ngOnInit() {
this.container = document.createElement( 'div' );
document.getElementById("espo-app").appendChild( this.container );
this.progressBar = document.getElementById('progressBar') as HTMLProgressElement;
//get environment
this.rgbLoader = new RGBELoader();
this.rgbLoader.setPath( 'assets/model/');
this.texture = await new Promise(resolve => this.rgbLoader.load('environment.hdr', texture => resolve(texture)));
this.loadHdr();
//get textures
const loader = new GLTFLoader().setPath( 'assets/model/' );
this.model = await new Promise(resolve => loader.load('ex_i-manual.gltf', gltf => resolve(gltf)));
this.loadTexture();
}
//set textures
loadTexture = async() => {
console.log(“model”, this.model);
// loading textures
await this.loadTexturesModel(this.model.scene, this.envMap).then((model)=>{
this.scene.add( model )
this.init();
});
}
// set environment
loadHdr = async ()=> {
console.log(“run”)
this.scene = new THREE.Scene();
this.camera.position.set( 5, 0, -300 );
this.camera.lookAt(0,0,0)
// Lights
let ambientLight = new THREE.AmbientLight( 0xffffff,10);
this.scene.add( ambientLight );
this.pmremGenerator = new THREE.PMREMGenerator( this.renderer );
this.pmremGenerator.compileEquirectangularShader();
this.envMap = this.pmremGenerator.fromEquirectangular( this.texture ).texture;
this.scene.background = this.envMap;
this.scene.environment = this.envMap;
this.texture.dispose();
this.pmremGenerator.dispose();
this.envMap = this.envMap;
}
initComposer = async () => {
this.composer = new EffectComposer(this.renderer);
var renderPass = new RenderPass(this.scene, this.camera);
this.composer.addPass(renderPass);
// the error emits from this below line
this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
this.outlinePass.edgeStrength = 6;
this.outlinePass.edgeGlow = 1;
this.outlinePass.edgeThickness = 4;
this.outlinePass.pulsePeriod = 2;
this.outlinePass.visibleEdgeColor = 0xffff00;
this.outlinePass.hiddenEdgeColor = 0xffffff;
this.composer.addPass(this.outlinePass);
let FXAA = new ShaderPass(new FXAAShader);
FXAA.uniforms[‘resolution’].value.set(1 / window.innerWidth, 1 / window.innerHeight);
FXAA.renderToScreen = true;
this.composer.addPass(FXAA);
}
init = async ()=> {
this.initComposer();
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.container.appendChild( this.renderer.domElement );
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
//currentRef.controls.addEventListener( 'change', currentRef.render ); // use if there is no animation loop
this.controls.minDistance = 2;
this.controls.maxDistance = 10;
this.controls.target.set( 0, 0, - 0.2 );
this.controls.update();
window.addEventListener( 'resize', this.onWindowResize.bind(Event, this.model), false)
window.addEventListener('dblclick', this.onDoubleClick, false);
window.addEventListener('click', this.onClick.bind(Event, this.model), false);
window.addEventListener('pointermove', this.onMouseMove.bind(Event), false);
const stats = Stats()
document.body.appendChild(stats.dom);
this.progressBar.style.display = "none";
this.render();
}
onWindowResize = (model:any , event: MouseEvent) =>{
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.render();
}
onDoubleClick = (event: MouseEvent) => {
this.raycaster = new THREE.Raycaster();
this.raycaster.setFromCamera({
x: (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1,
y: -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1
}, this.camera);
const intersects = this.raycaster.intersectObjects(this.sceneMeshes, true);
if (intersects.length > 0) {
const p = intersects[0].point
this.teen = new TWEEN.Tween(this.controls.target);
this.teen.to({
x: p.x,
y: p.y,
z: p.z
}, 500)
.easing(TWEEN.Easing.Cubic.Out)
.start()
}
}
onMouseMove = (event: MouseEvent) => {
this.raycaster.setFromCamera({
x: (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1,
y: -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1
}, this.camera);
const intersects = this.raycaster.intersectObjects(this.model.scene.children, true);
if (intersects.length > 0) {
let clips = this.model.animations;
clips.forEach((clip) => {
if (clip.name == intersects[0].object.name){
let groupName = intersects[0].object.userData.gltfExtensions.S8S_v3d_node_data.groupNames[0];
intersects.forEach((intersect) => {
if (typeof intersect.object.userData.gltfExtensions !== 'undefined'
&& typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data !== 'undefined'
&& typeof intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames !== 'undefined'){
if (intersect.object.userData.gltfExtensions.S8S_v3d_node_data.groupNames.includes(groupName)){
//outlinepass
this.outlinePass.selectedObjects = [intersect.object];
//outlinepass
this.render();
}
}
})
}
})
}
}
onClick = ( model:any , event: MouseEvent) => {
this.raycaster = new THREE.Raycaster();
this.raycaster.setFromCamera({
x: (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1,
y: -(event.clientY / this.renderer.domElement.clientHeight) * 2 + 1
}, this.camera);
const intersects = this.raycaster.intersectObjects(model.scene.children, true);
if (intersects.length > 0) {
let clips = model.animations;
clips.forEach((clip) => {
if (clip.name == intersects[0].object.name){
this.mixer = new THREE.AnimationMixer(model.scene);
this.mixer.clipAction(clip).play();
}
})
}
// this.animate();
this.render();
}
animate = () => {
requestAnimationFrame(this.animate)
if(this.mixer){
this.mixer.update(this.clock.getDelta());
}
this.controls.update();
this.render()
};
csvJSON(csv) {
const lines = csv.split(’\n’)
const result = []
const headers = lines[0].split(’;’)
for (let i = 1; i < lines.length; i++) {
if (!lines[i])
continue
const obj = {}
const currentline = lines[i].split(’;’)
for (let j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j]
}
result.push(obj)
}
return result
}
loadTexturesModel = async (model:any, envMap:any) => {
const manager = new THREE.LoadingManager();
var roughnessMipmapper = new RoughnessMipmapper( this.renderer);
const textureLoader = new THREE.TextureLoader(manager);
model.traverse( ( o ) => {
if ( o.isMesh ) {
if (o.material.userData.gltfExtensions.S8S_v3d_material_data.nodeGraph.nodes.length > 2){
let textName = o.material.userData.gltfExtensions.S8S_v3d_material_data.nodeGraph.nodes[2].name;
if(textName !== 'Material #2'){
o.material = new THREE.MeshStandardMaterial({map: textureLoader.load(`assets/model/${textName}.png`)});
roughnessMipmapper.generateMipmaps(o.material);
o.material.smoothShading = true;
// o.material.envMap = envMap;
o.material.roughness = 1;
o.material.metalness = 1;
}
}else {
o.material.roughness = 0;
}
}
})
return model;
}
render = () => {
this.controls.update()
this.composer.render();
this.renderer.render(this.scene, this.camera);
}
}
