three.js提升渲染效果

最新推荐文章于 2024-10-30 11:07:56 发布

原创

最新推荐文章于 2024-10-30 11:07:56 发布 · 974 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #图形渲染

本文介绍了如何在Three.js中使用纹理、法线贴图、环境贴图、光照效果、抗锯齿和阴影技术，以提升模型的逼真度，包括GLTF模型加载、材质调整和性能优化策略。

通常我们都希望渲染出更逼真的效果，有许多技术来改善模型在 Three.js 中渲染后的外观。但请注意，其中一些技术可能会影响性能，而某些技术则取决于您的模型。你必须根据情况进行调整。

本文部分内容为Three.js Journey课程的学习笔记

这里将采用使用了纹理、法线贴图等的逼真的模型。我们将使用 GLTF 示例模型存储库（GLTF Sample Models repository）中的飞行头盔（Flight Helmet）
初始代码框架：

import './style.css'
import * as THREE from 'three'
import {
   
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'lil-gui'

/**
 * Base
 */
// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Test sphere
 */
const testSphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshStandardMaterial() //标准网格材质
)
scene.add(testSphere)

/**
 * Sizes
 */
const sizes = {
   
   
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize', () =>
  {
   
   
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  })

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(4, 1, - 4)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
   
   
  canvas: canvas
})
renderer.setSize(sizes.</