zoukankan      html  css  js  c++  java
  • Threejs浅析(一)

    在进行学习threejs之前需要先了解几个概念!

    一、Three.js相关概念

    1. WebGL

    WebGL是一种Javascript的3D图形接口,把JavaScript和OpenGL ES 2.0结合在一起。

    2. OpenGL

    OpenGL是开放式图形标准,跨编程语言、跨平台,Javascript、Java 、C、C++ 、 python 等都能支持OpenG ,OpenGL的Javascript实现就是WebGL,另外很多CAD制图软件都采用这种标准。OpenGL ES 2.0是OpenGL的子集,针对手机、游戏主机等嵌入式设备而设计

    3.Canvas

    Canvas是HTML5的画布元素,在使用Canvas时,需要用到Canvas的上下文,可以用2D上下文绘制二维的图像,也可以使用3D上下文绘制三维的图像,其中3D上下文就是指WebGL。

    Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库。

    二、Three.js应用场景

    利用Three.JS可以制作出很多酷炫的3D动画,并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互,在页面上增加一些3D动画和3D交互可以产生更好的用户体验。通过Three.JS可以实现全景视图,这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果,这样用户就可以360度全方位地观察商品了,给用户带来更好的购物体验。另外,使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设,web3D技术还能得到更广泛的应用。

    三、主要组件

    在Three.js中,有了场景(scene)、相机(camera)和渲染器(renderer) 这3个组建才能将物体渲染到网页中去。

    1)场景

    场景是一个容器,可以看做摄影的房间,在房间中可以布置背景、摆放拍摄的物品、添加灯光设备等。

    2)相机

    相机是用来拍摄的工具,通过控制相机的位置和方向可以获取不同角度的图像。

    3)渲染器

    渲染器利用场景和相机进行渲染,渲染过程好比摄影师拍摄图像,如果只渲染一次就是静态的图像,如果连续渲染就能得到动态的画面。在JS中可以使用requestAnimationFrame实现高效的连续渲染。

  • 相关阅读:
    汉堡博客
    复利计算——结对1.0
    《构建之法》第4章读后感
    Compound Interest Calculator4.0
    实验一 命令解释程序的编写
    Compound Interest Calculator3.0续
    1203正规式转换为有穷自动机
    优缺点评价
    语文文法
    词法分析实验总结
  • 原文地址:https://www.cnblogs.com/yxd000/p/14421328.html
Copyright © 2011-2022 走看看