学习threejs，光晕效果

news2024/10/9 14:30:57

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
二、🍀光晕效果实现
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现光晕效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

二、🍀光晕效果实现

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt
4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.PointLight点光源，设置点光源位置，scene添加点光源。通过THREE.Lensflare实现光晕效果，场景scene添加光晕效果
5、加载几何模型：创建SphereGeometry球体、BoxGeometry立方体、PlaneGeometry地面几何体以及AxisHelper辅助工具坐标系，Scene场景加入以上几何体和工具。
6、加入controls控制，实现自动旋转，加入stats监控器，监控帧数信息

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn17(光晕)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/objects/Lensflare.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw();">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    // 背景色
    renderer.setClearColor(0x111111)
    // 如果设置，那么它期望所有纹理和颜色都是预乘伽马。默认值为false
    renderer.gammaInput = true
    //如果设置，那么它期望所有纹理和颜色需要以预乘伽马输出。默认值为false
    renderer.gammaOutput = true
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(400, -600, 100)
    camera.lookAt(new THREE.Vector3(-400, 600, -100))
  }
  var ambientLight, pointLight
  var initLight = () => {
    ambientLight = new THREE.AmbientLight('#111111')
    scene.add(ambientLight)

    pointLight = new THREE.PointLight('#ffffff')
    pointLight.position.set(-400, 600, -100)
    pointLight.castShadow = true
    scene.add(pointLight)

    var textureLoader = new THREE.TextureLoader()
    var textureFlare0 = textureLoader.load('lib/threejs/127/three.js-master/examples/textures/lensflare/lensflare0.png')
    var textureFlare2 = textureLoader.load('lib/threejs/127/three.js-master/examples/textures/lensflare/lensflare2.png')
    var textureFlare3 = textureLoader.load('lib/threejs/127/three.js-master/examples/textures/lensflare/lensflare3.png')

    var flareColor = new THREE.Color(0xffffff)
    flareColor.setHSL(0.55, 0.9, 1.0)

    var lensFlare = new THREE.Lensflare()
    lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 500, 0, flareColor))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 512, 0.0))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 512, 0.0))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare2, 512, 0.0))

    lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 60, 0.6))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 0.7))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 120, 0.9))
    lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 1.0))

    lensFlare.position.copy(pointLight.position)
    scene.add(lensFlare)
  }
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    //是否自动旋转
    controls.autoRotate = true
    controls.autoRotateSpeed = 1
    controls.minDistance  = 1
    controls.maxDistance  = 200
  }
  var cube, sphere, plane
  var initModel = () => {
    var helper = new THREE.AxisHelper(10)
    scene.add(helper)

    var sphereGeometry = new THREE.SphereGeometry(10, 30, 30)
    var sphereMaterial = new THREE.MeshStandardMaterial({color: 0xff00ff})
    sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    sphere.position.set(-20, 20, 0)
    sphere.castShadow = true
    scene.add(sphere)

    var cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff})
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cube.position.set(30, 5, -5)
    cube.castShadow = true
    scene.add(cube)

    var planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20)
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa})
    plane = new THREE.Mesh(planeGeometry, planeMaterial)
    plane.rotation.x = -0.5 * Math.PI
    plane.position.y = -0
    plane.receiveShadow = true
    scene.add(plane)
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initStats()
    initControls()

    animate()

    window.onresize = onWindowResize
  }
</script>
</html>