Three.js+TypeScript+Webpack学习记录（四）

使用环境参考

Node.js v16.19.1

正文

模型网格合并

接下来要实现一些后处理效果，比如外轮廓发光效果。我想让整体模型进行外发光，打开 blender 软件观察了一下模型的结构，由四个子块组成，这时可以通过软件进行合并，或者去 three 里面去合并。

如下在 blender 里的层级显示，从灵活度考虑，不推荐在模型里合并，Pass。

在 three 中加载完 glf 模型，观察其 children，就是四个子部分，利用代码合并它们。

import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils'
// 、、、
async addModel() {
    const model = await loadGLTF('gltf/SheenChair.glb')
    const geometryArray = []
    const materialArray = []
    model.traverse(obj => {
        // traverse 会遍历所有，一些模型含有光源，空节点，做下过滤
        if (obj instanceof THREE.Mesh) {
            geometryArray.push(obj.geometry)
            materialArray.push(obj.material)
        }
    })
    const mergeGeo = mergeBufferGeometries(geometryArray, true)
    const group = new THREE.Mesh(mergeGeo, materialArray)
    this.scene.add(group)
}

描边后处理

把 scene 的背景颜色搞暗一些，加入外发光后处理效果：

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'
import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils'
import { initCamera, initScene, initWebGLRenderer } from './init'
import { loadGLTF } from './load'
import { AnimationManager } from './animation'

class Game {
    scene: THREE.Scene
    camera: THREE.PerspectiveCamera
    renderer: THREE.WebGLRenderer
    orbitControls: OrbitControls

    raycaster = new THREE.Raycaster()
    mouse = new THREE.Vector2()

    animationManager = new AnimationManager()

    // 后处理
    composer: EffectComposer
    outlinePass: OutlinePass

    constructor() {
        this.scene = initScene()
        this.camera = initCamera()
        this.scene.add(this.camera)
        this.renderer = initWebGLRenderer()

        this.orbitControls = this.addOrbitControls(this.camera, this.renderer)
        this.addModel()
        this.addResizeEventListener()
        this.addClickEvent()

        this.composer = new EffectComposer(this.renderer)
		const renderPass = new RenderPass(this.scene, this.camera)
		this.composer.addPass(renderPass)

		const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera)
        // 描边 pass 的各种参数
        outlinePass.edgeStrength = 4
        outlinePass.edgeGlow = 1
        outlinePass.edgeThickness = 1
        outlinePass.visibleEdgeColor.set('#ffffff')
        outlinePass.hiddenEdgeColor.set('#190a05')
        this.composer.addPass(outlinePass)

        this.outlinePass = outlinePass
    }

    addClickEvent() {
        this.renderer.domElement.addEventListener('pointermove', (ev) => {
            this.mouse.x = (ev.clientX / window.innerWidth) * 2 - 1
            this.mouse.y = -(ev.clientY / window.innerHeight) * 2 + 1
            this.raycaster.setFromCamera(this.mouse, this.camera)
            const intersects = this.raycaster.intersectObject(this.scene, true)
            if (intersects.length) {
                // 想多个模型发光就声明一个数组，往里 push 即可
                this.outlinePass.selectedObjects = [intersects[0].object]
            } else {
                this.outlinePass.selectedObjects = []
            }
        })
    }

    addOrbitControls(camera: THREE.Camera, renderer: THREE.WebGLRenderer) {
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.autoRotate = true
        controls.enableDamping = true
        controls.update()
        return controls
    }

    async addModel() {
        const model = await loadGLTF('gltf/SheenChair.glb')
        const geometryArray = []
        const materialArray = []
        model.traverse(obj => {
            if (obj instanceof THREE.Mesh) {
                geometryArray.push(obj.geometry)
                materialArray.push(obj.material)
            }
        })
        const mergeGeo = mergeBufferGeometries(geometryArray, true)
        const group = new THREE.Mesh(mergeGeo, materialArray)
        this.scene.add(group)
    }

    addResizeEventListener() {
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight
            this.camera.updateProjectionMatrix()
            this.renderer.setSize(window.innerWidth, window.innerHeight)
        })
    }

    startMainLoop() {
        // 等待一帧用于初始化
        Promise.resolve().then(() => {
            this.step()
        })
    }

    step() {
        requestAnimationFrame(this.step.bind(this))
        this.orbitControls && this.orbitControls.update()
        this.animationManager.step()
        // 注意上面 this.composer 已经 addPass 了普通渲染流程，这里注释掉
        // this.renderer.render(this.scene, this.camera)
        this.composer.render()
    }
}

const game = new Game()
game.startMainLoop()

更多文章与分享

Three 学习项目链接：https://github.com/KuoKuo666/threejs-study

个人网站：www.kuokuo666.com

2023！Day Day Up！