LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
  • Hellow Three.js Pro 理解光源及应用
  • THREE.AmbientLight
  • THREE.PointLight
  • THREE.SpotLight
  • THREE.DirectinalLight
  • 使用特殊光源生成高级光照效果
  • THREE.HemisphereLight
  • THREE.AreaLight
  • 镜头眩光效果
Export as PDF
  1. webgl
  2. Awesome-threejs
  3. docs

hello-light-pro

PreviousHellow Three.js 之 创建各种几何形状NextHellow Three.js 之 光影之谜

Last updated 2 years ago

Hellow Three.js Pro 理解光源及应用

首选,在 Threejs 中 所有光源都是基于 THREE.Light 对象扩展而成的。

基本光源包含:

  • THREE.AmbientLight

  • THREE.PointLight

  • THREE.SpotLight

  • THREE.DirectinalLight

THREE.AmbientLight

THREE.AmbientLight 创建时,颜色将会应用到全局,该光源并没有特别的来源方向,而且它不会生成阴影, 所以,不能将 THREE.AmbientLight 作为场景中唯一的光源,因为它会把场景中的物体渲染为相同的颜色,无论什么形状。

在使用其它光源的时候同时使用它,目的是弱化阴影或给场景添加一些额外的颜色。

AmbientLight( color, intensity )

  • color -- 光源颜色的RGB数值。

  • intensity -- 光源强度的数值。

使用方法

var ambientLight = new THREE.AmbientLight('#ff00ff');
scene.add(ambientLight);

THREE.PointLight

THREE.PointLight 是一种单发光点、照射所有方向的光源,比如:夜空中的照明弹。该光源不会产生阴影(因为朝所有方向发散光线,在这种情况计算阴影对GPU负担太大)。

点光源照到不同物体表面的亮度是线性递减的,因此,离点光源距离越远的物体会显得越暗。

构造函数

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

  • color -- 颜色的RBG数值。

  • intensity -- 光强的数值。

  • distance - 光强为0处到光源的距离,0表示无穷大。

  • decay - 沿着光照距离的衰退量。

使用方法

var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

THREE.SpotLight

THREE.SpotLight 聚光灯光源,是一种锥形效果光源,属于常见光源,在产生阴影的时候比较有用。实例:手电筒。

构造函数

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )

  • color -- 颜色的RBG数值。

  • intensity -- 光强的数值。

  • distance -- 光强为0处到光源的距离,0表示无穷大。

  • angle -- 光线散射角度,最大为Math.PI/2。

  • penumbra -- 聚光锥的半影衰减百分比。在0和1之间的值。默认为0。

  • decay -- 沿着光照距离的衰退量。

使用方法

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true; // 设置生成阴影

scene.add( spotLight );

特有属性

target 将聚光灯的焦点位于 target.position 处。

THREE.DirectinalLight

THREE.DirectinalLight 方向光可以看做是距离很远的光源,所发出的光线都是平行的,比如太阳。

方向光和聚光灯光源的区别:

  • 方向光不像聚焦光那样离目标越远越暗淡

  • 被方向光光源照亮整个区域接收到的光强是一样的

构造函数

DirectionalLight( color : Integer, intensity : Float )

  • color -- 光源颜色的RGB数值。

  • intensity -- 光源强度的数值。

使用特殊光源生成高级光照效果

特殊光源:

  • THREE.HemisphereLight

  • THREE.AreaLight

THREE.HemisphereLight

THREE.AreaLight 半球光光源,这种光源可以为室外场景创建更加自然点光照效果。

应用场景

当你在室外的时候,并不是所有光都来自上方,很多空气的散射、地面的反射,以及其它物体的反射,THREE.AreaLight 就是为这种情形创建的。

构造函数

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

  • skyColor -- 从天空发出光的颜色

  • groundColor -- 从地面发出光的颜色

  • intensity -- 光线照射的强度。默认值为1。

THREE.AreaLight

THREE.AreaLight 平面光光源,可以从很大的平面发射光线,而不是单个点。

如果要使用 THREE.AreaLight 光源,就不能用我们之前一直使用的 THREE.WebGLRenderer 对象,因为平面光光源氏一种非常复杂的光源,会对 THREE.WebGLRenderer 造成非常严重的性能损失, 可以用 THREE.WebGLDeferredRenderer (WebGL的延迟渲染器)对象在渲染场景时,可以处理复杂光照或者是光源很多的情况。

需要引入额外的代码文件:

<script type="text/javascript" src="../libs/WebGLDeferredRenderer.js"></script>
<script type="text/javascript" src="../libs/ShaderDeferred.js"></script>
<script type="text/javascript" src="../libs/RenderPass.js"></script>
<script type="text/javascript" src="../libs/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/CopyShader.js"></script>
<script type="text/javascript" src="../libs/ShaderPass.js"></script>
<script type="text/javascript" src="../libs/FXAAShader.js"></script>
<script type="text/javascript" src="../libs/MaskPass.js"></script>

镜头眩光效果

THREE.LensFlare 创建镜头光晕。

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color, blending : Materials )

  • texture -- THREE.Texture (可选)

  • size -- 像素尺寸 (-1 = 使用 texture.width)

  • distance -- 介于 (0-1) 的光源距离(0 = 在光源处)

  • blending -- 混合模式 - 缺省为 THREE.NormalBlending

  • color -- 镜头光晕的颜色。

Demo查看