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
  • 基础知识
  • Light 光源基类
  • 各种派生类
  • 材质与光源
Export as PDF
  1. webgl
  2. Awesome-threejs
  3. docs

Hellow Three.js 之 光影之谜

Previoushello-light-proNextHellow Three.js 之 加载外部3D模型

Last updated 2 years ago

基础知识

常识,发光到物体即光源,有光,就有影。要想体现物体的3D真实性,光影就是很重要的效果。 在threejs的世界里,也为光源提供了很多选择。

Light 光源基类

Light 是 Threejs 里所有光源的基类

Light( color : Integer, intensity : float )

  • color -- 光源颜色的RGB数值, 接受一个16进制的颜色值 如: 0xffffff 表示白色

  • intensity -- 光源强度的数值

各种派生类

基础光源:

  • AmbientLight 环境光 - 它的颜色会添加到整个场景和所有对象的当前颜色上

  • DirectionalLight 平行光 -- 例如:太阳光

  • PointLight 点光源 -- 空间中的一点,朝所有的方向发射光线

  • SpotLight 聚光源 - 聚光灯是由点光源发出,这种类型的光也可以产生投影,有聚光的效果

特殊光源:

  • HemisphereLight 半球光 - 可以为室内场景创建更加自然的光照效果,模拟反光面和光线微弱的天气

  • RectAreaLight 矩形区域光源 - 这种光从一个矩形面均匀地发射,可以用来模拟明亮的窗户或者带状的照明;可以产生投影

1、AmbientLight 环境光

环境光故名思意,是光线经过周围环境多次反射而来的光,没有确定的方向。

AmbientLight( color, intensity )

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

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

var amblight = new THREE.AmbientLight( 0x404040 );
scene.add( amblight );

2、DirectionalLight 平行光

从一个特定的方向,而不是从一个特定的位置。这个光看起来就像光源位于无限远处,因此它产生的光线都是平行的。 比如太阳,因为太阳很遥远,看起来所有的阳光照射到物体上都几乎来自同一个角度。

irectionalLight( hex, intensity )

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

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

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

3、PointLight 点光源

点光源:某个位置特定的发光点,比如灯泡、蜡烛、萤火虫等

PointLight( color, intensity, distance, decay )

  • color -- 颜色的RBG数值。

  • intensity -- 光强的数值。

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

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

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

4、SpotLight 聚光源

一种能投射锥形阴影区域的点光源,比如探照灯。

SpotLight( color, intensity, distance, angle, penumbra, decay )

  • 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;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

scene.add( spotLight );

材质与光源

物体的材质在渲染的时候,和光源有很重要的关系。比如,物体的纹理、色彩、透明度、光滑度、折射率、反光率等。

要想体现材质等真实性,光体现了很主要的效果,如果没有光,都是黑漆漆的,我们眼睛估计无法分辨物体的形态。

走夜路,打手电,通过光我们能分辨路上的石头、树枝、坑洞等。


本文部分内容参照及引用:

Demo查看
three.js docs
AmbientLight
AmbientLight
AmbientLight
AmbientLight