• three.js初探


    Three.js 中,要渲染物体到网页中,必备3个组件:场景 scene、相机 camera、渲染器 renderer。

    场景 scene

    场景组件包括:
    * 相机 — 决定哪些东西要渲染到屏幕上
    * 光源 — 对材质如何显示,及阴影生成产生影响
    * 物体 — Mesh对象,在相机视图里主要的渲染对象,如方块、球体等

    相机 camera

    相机就是在场景组件中的相机,相机决定了场景中哪个角度的景色会被渲染出来。主要有:
    * 正交相机 OrthographicCamera
    * 透视相机 PerspectiveCamera

    渲染器 renderer

    渲染器决定了渲染的结果应该画在元素的什么元素上面,并且以怎样的方式来绘制。 Threejs中提供了很多的渲染方式,主要是 CanvasRenderer 、WebGLRenderer两种。

    物体 Object

    在three.js中,我们使用Mesh模型,Mesh的构造函数是这样的:Mesh( geometry, material ) geometry是它的形状,material是它的材质(会反光的、金属光泽的等等)。

    可以用纹理texture来构建新的material,也可以用默认的material。

    每个物体有自己的大小,默认情况下都是很小的,如果你不放大,基本是看不到的。所以物体新建后都要setSize或者setScale。

    raycaster定位鼠标

    raycaster可以获取到鼠标的位置点投射在物体上的位置点

    渲染canvas
    通过canvas新建一个CanvasTexture,再通过texture新建一个物体,把它添加到场景中。修改canvas的内容,物体会跟着改变。

  • 相关阅读:
    小程序排错(redis导致)
    linux系统删除-开头文件或目录
    nginx 反向代理
    memcache
    一次故障过程
    json.Decoder vs json.Unmarshal
    ssl中间证书
    作业10:String类
    Angular6如何引入jQuery-knob
    OpenJdk源码下载
  • 原文地址:https://www.cnblogs.com/peace1/p/16174679.html
Copyright © 2020-2023  润新知