threejs 11 postprocessing后处理

最新推荐文章于 2025-04-28 08:00:11 发布

Jessica巨人

最新推荐文章于 2025-04-28 08:00:11 发布

阅读量566

点赞数

分类专栏： threejs 文章标签： three.js

本文链接：https://blog.youkuaiyun.com/qq_34113388/article/details/120971384

版权

RenderPass
是最基础的一个pass。

EffectComposer合成器

import * as THREE from "three"
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import {
    DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";
import{
   EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer"
import{
   RenderPass} from "three/examples/jsm/postprocessing/RenderPass"

var renderer = new THREE.WebGLRenderer({
    antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {
   //窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
//合成器的绘制区域需要设置高宽
    effectComposer.setSize(window.innerWidth,window.innerHeight);
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

var light = new HemisphereLight(0xffffff, 0x444444