threejs4模型发光加GUI

Posted 2021-11-07 Jessica巨人

import {WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, 
    AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, TextureLoader, MirroredRepeatWrapping, RepeatWrapping, 
    ClampToEdgeWrapping, MeshBasicMaterial, Group, CylinderBufferGeometry, FrontSide, BackSide}from "three"

import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
import{MTLLoader}from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from"three/examples/jsm/loaders/OBJLoader"
import{FBXLoader}from "three/examples/jsm/loaders/FBXLoader"
import{EffectComposer}from "three/examples/jsm/postprocessing/EffectComposer"
import{RenderPass}from "three/examples/jsm/postprocessing/RenderPass"
import{UnrealBloomPass}from "three/examples/jsm/postprocessing/UnrealBloomPass"
import{GUI}from "three/examples/jsm/libs/dat.gui.module"

var renedrer,camera,control,scene;
var effectComposer,renderPass,bloomPass;

var params = {
    exposure: 1,
    bloomStrength: 0.07,
    bloomThreshold: 1.01,
    bloomRadius: 0.7
};
var gui;

function init() 
{
    renedrer=new WebGLRenderer({});
    document.body.appendChild(renedrer.domElement);
    renedrer.setSize(window.innerWidth,window .innerHeight);

    camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
    camera.position.y=1000;
    camera.position.z=500;
    


    var light=new HemisphereLight(0xfffff,0x444444);

    control=new OrbitControls(camera,renedrer.domElement);

    scene =new Scene();


    //scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
    scene.add(light);
    scene.add(new AxesHelper(10000));

    window.addEventListener('resize',()=>{
        renedrer.setSize(window.innerWidth,window .innerHeight);
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        effectComposer.setSize(window.innerWidth,window.innerHeight);
    })

    loadModel();
    initEffectComposer();
    initGUI();
}


function loadModel(params) {
    var fbxLoader=new FBXLoader();
    var mtlLoader=new MTLLoader();
    var objLoader=new OBJLoader();
    for (let i = 1; i < 8; i++) {
        mtlLoader.load("../assets/model/city/ny"+i+".mtl",function (preMaterial) {
        
            preMaterial.preload();
            objLoader.setMaterials(preMaterial).load("../assets/model/city/ny"+i+".obj",function(obj){
                obj.position.set(6001,604,2151);
                scene.add(obj);
            })
        })
        
    }
     
}

function initEffectComposer(params) {
    effectComposer=new EffectComposer(renedrer);
    effectComposer.setSize(window.innerWidth,window.innerHeight);

    renderPass=new RenderPass(scene,camera);
    effectComposer.addPass(renderPass);

    bloomPass=new UnrealBloomPass(new Vector2(window.innerWidth,window.innerHeight),
    0.1,
    1,
    0.1
    )
    effectComposer.addPass(bloomPass);
}


function initGUI() {
    gui = new GUI();
    gui.add(params, 'exposure', 0.1, 2).onChange(function(value) {
        // renderer.toneMappingExposure
        renderer.toneMappingExposure = Math.pow(value,4.0); //调节整个场景亮度，默认值是1

    });

    gui.add(params, 'bloomThreshold', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.threshold = Number(value);

    });

    gui.add(params, 'bloomStrength', 0.0, 3.0).step(0.01).onChange(function(value) {

        bloomPass.strength = Number(value);

    });

    gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.radius = Number(value);

    });
}
 

function render() {

    //renedrer.render(scene,camera);
    effectComposer.render(scene,camera);
    requestAnimationFrame(render);
}
init();
render();

效果图：

就是这样。