美文网首页
three.js 入门

three.js 入门

作者: 云之一 | 来源:发表于2022-02-22 15:06 被阅读0次

一、three.js

  • openGL跨平台3D/2D的绘图标准。wegblopenGL在浏览器上的实现,是基础的绘图api .

二、three.js 要素

  • 场景---三维空间、坐标系
  • 相机--- 人眼、角度、姿态。
  • 光源---阴影
  • 物体---形状、材质

三、渲染重绘

  • setInterval-固定时间间隔重绘
  • requestAnimationFrame-浏览器根据当前CPU负荷自行决定何时重绘,已达到最佳帧率

四、相机

  • 正交投影相机-示景体为长方体 THREE.OrthographicCamera(left, right, top, bottom, near, far)

    image.png
  • 透视投影相机-示景体为锥形 THREE.PerspectiveCamera(fov, aspect, near, far)

    image.png

五、模型

3D建模软件导入外部模型文件

六、光照

  • 环境光:无光源位置、所有角度看到亮度一致、设置基础亮度
  • 点光源:亮度线性递减
  • 平行光:亮度与距离无关
    -聚光灯:类似圆锥形的光线

相关文章

  • 参考文章和书籍

    豆瓣 three.js 入门指南 https://read.douban.com/reader/ebook/741...

  • Three.js 操作3D模型经验总结

    一、概述 最近在调研组内3D机房可视化的实现,之前和大家分享过three.js的入门操作,通过three.js我们...

  • WebGL入门demo

    WebGL入门demo three.js入门 开场白 哇哦,绘制气球耶,在网页上?对啊!厉害了!3D效果图也能在网...

  • Three.js入门

    Three.js封装了底层的图形接口,使得我们能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景...

  • Three.js入门

    1、什么是WebGL, 什么是three.js? WebGL是一种技术,一种在浏览器上实现三维效果,展示3D模型和...

  • Three.js入门

    Threejs 为什么? webGL太难用,太复杂! 但是现代浏览器都支持 WebGL 这样我们就不必使用 Fla...

  • three.js 入门

    一、three.js openGL跨平台3D/2D的绘图标准。wegbl是openGL在浏览器上的实现,是基础的绘...

  • 使用three.js的基本组件

    创建一个简单的入门案例 three.js的三大场景:场景(scene)、相机(camera)和渲染器(render...

  • THREE.js_的使用(例子)

    THREE.js 下载 THREE.js 官方文档 THREE.js 中文基础教程 THREE.MeshLine ...

  • Three.js 入门基础

    Three.js 1.Three.js 介绍 OpenGL(英语:Open Graphics Library,译名...

网友评论

      本文标题:three.js 入门

      本文链接:https://www.haomeiwen.com/subject/ztubhrtx.html