精华内容
下载资源
问答
  • 1、ThreeJS的常见几何体 BufferGeometry和Geometry有什么不同? 如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同,缓冲类型几何体BufferGeometry相比普通几何体Geometry性能更好。...

    1、ThreeJS的常见几何体

    BufferGeometry和Geometry有什么不同?

    如果你想简单理解BufferGeometryGeometry有什么不同,就是两者的数据结构不同,缓冲类型几何体BufferGeometry相比普通几何体Geometry性能更好。Three.js渲染器在解析几何体对象的时候,如果几何体对象是普通几何体对象Geometry, Three.js的WebGL渲染器 会把普通几何体对象Geometry转化为缓冲类型几何体对象BufferGeometry,然后再提取BufferGeometry包含的顶点信息,这里可以看出来直接使用Buf fer Geometry解析的时候相对Geometrv少了一步,自然性能更高一些。

    ThreeJS中的常见几何体
    几何体名称解释方法实例
    BoxGeometry立方几何体var geometry = new THREE.BoxGeometry(1,1,1 );
    CircleGeometry圆形几何体var geometry =new THREE.CircleGeometry( 5, 32 );
    ConeGeometry圆锥几何体var geometry = new THREE.ConeGeometry( 5, 20, 32 );
    CylinderGeometry圆柱几何体var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
    DodecahedronGeometry十二面几何体var geometry = new THREE.DodecahedronGeometry(12, 0);
    EdgesGeometry边缘几何体var edges = new THREE.EdgesGeometry( geometry );
    IcosahedronGeometry二十面几何体var geometry = new THREE.IcosahedronGeometry( 12, 0);
    OctahedronGeometry八面几何体var geometry = new THREE.OctahedronGeometry(12, O );
    PlaneGeometry平面几何体var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
    RingGeometry圆环几何体var geometry = new THREE.RingGeometry( 1,5, 32);
    SphereGeometry球几何体var geometry = new THREE. SphereGeometry( 5, 32, 32 ); :
    TetrahedronGeometry四面几何体var geometry = new THREE.TetrahedronGeometry( 5, 32, 32 );
    TextGeometry文本几何体
    TorusGeometry圆环几何体var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
    TubeGeometry管道缓冲几何体var geometry =new THREE.TubeGeometry( path, 20, 2, 8, false );
    WireframeGeometry网格几何体var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );

    ThreeJS EdgesGeometry边缘几何体画一个立方体的边框

    var edges = new THREE.EdgesGeometry( geometry,0); // 每个面都有斜线
    var edges = new THREE.EdgesGeometry( geometry,1); // 去掉每个面的斜线

    ThreeJS 网格几何体(WireframeGeometry)

    挤压几何体(ExtrudeGeometry)

    它是从一个二维图形创建出-个三维图形。譬如,我们可以先通过THREE . Shape对象,先创建一个二 维的图形,然后通过ExtrudeGeometry 将它拉伸为-一个三维图形。也可以先通过THREE. PlaneGeometry对象创建一个二维平面,然后再利用ExtrudeGeometry 进行拉伸。

    车削几何体(LatheGeometry)

    THREE.LatheGeometry允许你从一条光滑的曲线创建图形。此曲线是由多个点定义,通常称作样条曲线。然后再绕y轴旋转,就生成了一组车床类型的几何体模型。

    参数几何体(ParametricGeometry)

    使用THREE.ParametricGeometry可以根据传入的公式,计算出相应的几何体。这是一一个很 具有扩展性的几何体。

    多面体(PolyhedronGeometry)

    多面体是一种只有平面和直边的几何体。多数情况下我们不会使用这种几何体,因为three. js库为我们提供了几种特定的多面体,如: TetrahedronGeometry四面体、OctahedronGeometry八面体、DodecahedronGeometry十二面体、IcosahedronGeometry二十面体。

    形状几何体(ShapeGeometry)

    从一个或多个路径形状中创建一个单面多边形几何体。

    圆环扭结几何体(TorusKnotGeometry)

    这是一种比较特别的扭结,样子就像是一根管子绕着它自己转了几圈。

    2、常见的材质

    点材质 PointsMaterial

    点材质比较简单,只有PointsMaterial ,通常使用点模型的时候会使用点材质PointsMaterial。
    点材貭pointsMaterial的.size属性可以毎个点這染的方形区域尺寸像素大小。注意:血用到点模型対象。

    var geometry = new THREE.Spher eGeometry(100,25,25); //创建一个球体几何对象
    //创建一个点材质对象
    var material = new THREE.PointsMaterial({
    color: 0x0000ff, //颜色
    size: 1, //点渲染尺寸
    });
    //点模型对象参数: 几何体
    点材质
    var point = new THREE . Points (geometry,materia1l);
    scene. add(point); //网格 模型添加到场景中

    线材质

    线材质有基础线材质LineBasicMaterial和虚线材质LineDashedMaterial两个,通常使用使用Line等线模型才会用到线材质。
    基础线材质LineBasicMaterial。注意:应用到线模型对象

    var geometry = new THREE . Spher eGeometry(100,25, 25);//球体
    //直线基础材质对象
    var material = new THREE .L ineBasi cMaterial({
    color: 0x0000ff
    });
    var line = new THREE.Line(geometry, material); //线模型对象
    scene. add(1ine); //点模型添加到场景中

    虚线材质L ineDashedMaterial

    //虚线材质对象:产生虚线效果
    var material = new THREE.LineDashedMaterial({
    color: 0x0000ff,
    dashSize: 10,//显示线段的大小。默认为3。
    gapSize: 5,//间隙的大小。 默认为1
    });
    var line = new THREE.Line(geometry, material); //线模型对象
    // computeL ineDistances方法计算L ineDashedMater ia1所需的距离数组
    line. computeL ineDistances(); 

    网格模型材质
    Threejs提供的网格类材质比较多,网格材质涉及的材质种类和材质属性也比较多, -节课也无法讲解完,本节课先有一个感性的认知。
    网格材质顾名思义,网格类模型才会使用的材质对象。注意:应用到网格模型对象基础网格材质对象MeshBasicMaterial ,不受带有方向光源影响,没有棱角感。

    var material = new THREE.MeshBasicMaterial(l
        color: 0x0000ff
    ])

    MeshLambertMaterial材质可以实现网格Mesh表面与光源的漫反射光照计算,了光照计算,物体表面分界的位置才产生棱角感。

    var material = new THREE.MeshLambertMaterial({
        color:0x00ff00
    })

    高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

    var material = new THREE .MeshPhongMaterial(l
        color:0xff0000
        specular :0x444444,//高光部分的颜色
        shininess:20,//高光部分的亮度,默认30
    ]);

     

    材质的基本属性

    如果你的javascript语言基础还可以,应该明白类、基类、子类、父类等概念。如果你有这些类的概念,那么在学习Threejs的过程中,如何查找Threejs文档将会比较顺利。
    点材质PointsMaterial、基础线材质LineBasicMaterial、基础网格材质MeshBasicMaterial、高光网格材质MeshPhongMaterial等材质都是父类Material的子类。
    各种各样的材质子类都有自己的特定属性,比如点材质特有的尺寸属性.size、光网格材质特有的高光颜色属性. specular等等这些属性可以成为子类材质的私有属性。
    所有子类的材质都会从父类材质Material继承透明度opacity、面side等属性,这些来自父类的属性都是子类共有的属性。

    .size属性

    在Three.js开发过程中你可能会遇到下面的问题,比如three.js矩形 平面planegeometry的网格模型插入场景看不到,一个球体或立方体网格模型如何背面显示贴图,正面不显示....对于这些问题可以通过Three.js材质对象.side属性来设置。
    材质.side属性的具体介绍可以查看Threejs文档中所有材质对象的基类Material。
    .side属性的属性值定义面的渲染方式前面后面或双面.属性的默认值是THREE.Frontside,表示前面.也可以设置为后面THREE.Backside或双面THREE.Doubleside

    var material = new THREE.MeshBasicMaterial({
        color: 0xdd00ff,
        size: THREE.Doubleside
    ]);

    材质透明度. opacity

    通过材质的透明度属性. opacity可以设置材质的透明程度,. opacity属性值的范围是0.0~1.0, 0.0值表示完全透明, 1.0表示完全不透明,. opacity默认值1.0。
    当设置. opacity属性值的时候,需要设置材质属性transparent值为true,如果材质的transparent属性没设置为true,材质会保持完全不适明状态。
    在构造函数参数中设置transparent和. opacity的属性值.

    var material = new THREE.MeshPhongMaterial(l
        color: 0x220000 ,
        // transparent设置为true,开启透明,否则opacity不起作用
        transparent: true ,
        //设置材质透明度
        opacity: 0.4
    ]);

    通过访问材质对象属性形式设置transparent和.opacity的属性值 

    // transparent没置カtrue,幵后透明,否則opacity不起作用
    material.transparent = true;
    // 设置材质透明度
    material.opacity = 0.4;

    深度测试.depthTest

    depthTest depthWrite :绘制不透明物体时,深度测试开启是能保证正确的遮挡关系,绘制透明物体时,关掉深度测试就能看到透明物体之后的物体

    3、创建纹理贴图

    通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图. map属性的值。
    材质的颜色贴图属性. map设置后,模型会从纹理贴图上采集像素值,这时候-般来说不需要在设置材质颜色. color。. map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

        //纹理贴图映射到- -个矩形平面上
        var geometry = new THREE.PlaneGeometry(204,102); //矩形平面
        // TextureLoader创建一 个纹理加载器对象, 可以加载图片作为几何体纹理
        var textureLoader = new THREE.TextureLoader() ;
        //执行1oad方法,加载纹理贴图成功后,返回- -个纹理对象Texture
    textureLoader.1oad('Earth. png', function(texture) {
        var material = new THREE .MeshL amber tMaterial({
        // color: 0x0000ff,
        //设置颜色纹理贴图: Textur e对象作为材质map属性的属性值
        map: texture,//设置 颜色贴图属性值
        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        //纹理贴图加载成功后,调用渲染函数执行渲染操作
        // render();
    })

    我们可以设置纹理贴图是否可以重复
    WrapS这个值定义了纹理贴图在水平方向上将如何包裹,在UV映射中对应于U。
    WrapT这个值定义了纹理贴图在垂直方向上将如何包裹,在UV映射中对应于V。

    ThreeJS创建纹理贴图demo.zip-其他文档类资源-CSDN下载

    展开全文
  • Three.js常见几何体和曲线API介绍 本文是Three.js电子书的7.1节 本节课主要内容是对Threejs几何体和曲线相关的API进行一个整体的介绍,更具体的介绍可以查看本章后面几节课程。 几何体 关于Threejs常见的几何体类...

    Three.js常见几何体和曲线API介绍

    本文是Three.js电子书的7.1节

    本节课主要内容是对Threejs几何体和曲线相关的API进行一个整体的介绍,更具体的介绍可以查看本章后面几节课程。

    几何体

    关于Threejs常见的几何体类下面通过一个脑图进行了简单的分类,并附上了threejs文档连接。

    几何体本质上就是threejs生成顶点的算法,如果有兴趣你可以打开threejs几何体部分的源码查看threejs具体如何通过程序生成顶点位置、法线方向等顶点数据。

    所有几何体的基类分为GeometryBufferGeometry两大类,两类几何体直接可以相互转化。

    基类Geometry 常见 正多面体 平面 2D转3D 轮廓填充 文字 参数化曲面 长方体BoxGeometry 圆柱体CylinderGeometry 球体SphereGeometry 圆锥、棱锥ConeGeometry 正四面体TetrahedronGeometry 正八面体OctahedronGeometry 正十二面体DodecahedronGeometry 正二十面体IcosahedronGeometry RingGeometry 环平面 PlaneGeometry 矩形平面 CircleGeometry 圆平面 ExtrudeGeometry 拉伸、扫描 LatheGeometry 旋转 TubeGeometry 管道 ShapeGeometry TextGeometry ParametricGeometry

    曲线

    曲线和几何体同样本质上都是用来生成顶点的算法,曲线主要是按照一定的规则生成一系列沿着某条轨迹线分布的顶点。当你把曲线、几何体看成顶点的时候,查考文档很多属性和方法自然很同意理解。

    曲线 Extras / Core Extras / Curves Curve CurvePath Path 绘制二维形状 Shape ShapePath Shape Path ShapePath CurvePath Curve 继承关系 基类Curve LineCurve 直线 ArcCurve 圆弧 EllipseCurve 椭圆 SplineCurve 样条曲线 QuadraticBezierCurve 二次 CubicBezierCurve 三次 二维贝塞尔曲线 2D LineCurve3 直线 CatmullRomCurve3 三维样条曲线 CubicBezierCurve3 三次 QuadraticBezierCurve3 二次 三维贝塞尔曲线 3D

    展开全文
  • 第三节课 简答的材质和纹理贴图,给几何体披上好看的外衣 1、常见的材质 点材质PointsMaterial 点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial。 点材质PointsMaterial的.size...

    1、常见的材质

    点材质PointsMaterial

    点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial

    点材质PointsMaterial.size属性可以每个顶点渲染的方形区域尺寸像素大小。

    var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象
    // 创建一个点材质对象
    var material = new THREE.PointsMaterial({
      color: 0x0000ff, //颜色
      size: 1, //点渲染尺寸
    });
    //点模型对象  参数:几何体  点材质
    var point = new THREE.Points(geometry, material);
    scene.add(point); //网格模型添加到场景中
    

    线材质

    线材质有基础线材质LineBasicMaterial和虚线材质LineDashedMaterial两个,通常使用使用Line等线模型才会用到线材质。

    基础线材质LineBasicMaterial

    var geometry = new THREE.SphereGeometry(100, 25, 25);//球体
    // 直线基础材质对象
    var material = new THREE.LineBasicMaterial({
      color: 0x0000ff
    });
    var line = new THREE.Line(geometry, material); //线模型对象
    scene.add(line); //点模型添加到场景中
    

    虚线材质LineDashedMaterial

    // 虚线材质对象:产生虚线效果
    var material = new THREE.LineDashedMaterial({
      color: 0x0000ff,
      dashSize: 10,//显示线段的大小。默认为3。
      gapSize: 5,//间隙的大小。默认为1
    });
    var line = new THREE.Line(geometry, material); //线模型对象
    //  computeLineDistances方法  计算LineDashedMaterial所需的距离数组
    line.computeLineDistances();
    

    网格模型材质

    Threejs提供的网格类材质比较多,网格材质涉及的材质种类和材质属性也比较多,一节课也无法讲解完,本节课先有一个感性的认知。

    网格材质顾名思义,网格类模型才会使用的材质对象。

    基础网格材质对象MeshBasicMaterial,不受带有方向光源影响,没有棱角感。

    var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff,
    })
    

    MeshLambertMaterial材质可以实现网格Mesh表面与光源的漫反射光照计算,有了光照计算,物体表面分界的位置才会产生棱角感。

    var material = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
    });
    

    高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

    var material = new THREE.MeshPhongMaterial({
      color: 0xff0000,
      specular:0x444444,//高光部分的颜色
      shininess:20,//高光部分的亮度,默认30
    });
    
    

    材质的基本属性

    如果你的javascript语言基础还可以,应该明白类、基类、子类、父类等概念。如果你有这些类的概念,那么在学习Threejs的过程中,如何查找Threejs文档将会比较顺利。

    点材质PointsMaterial、基础线材质LineBasicMaterial、基础网格材质MeshBasicMaterial、高光网格材质MeshPhongMaterial等材质都是父类Material的子类。

    各种各样的材质子类都有自己的特定属性,比如点材质特有的尺寸属性.size、高光网格材质特有的高光颜色属性.specular等等这些属性可以成为子类材质的私有属性。

    所有子类的材质都会从父类材质Material继承透明度opacity、面side等属性,这些来自父类的属性都是子类共有的属性。

    .side属性

    在Three.js开发过程中你可能会遇到下面的问题,比如three.js矩形平面planegeometry的网格模型插入场景看不到,一个球体或立方体网格模型如何背面显示贴图,正面不显示…,对于这些问题可以通过Three.js材质对象.side属性来设置。

    材质.side属性的具体介绍可以查看Threejs文档中所有材质对象的基类Material

    .side属性的属性值定义面的渲染方式前面后面 或 双面. 属性的默认值是THREE.FrontSide,表示前面. 也可以设置为后面THREE.BackSide 或 双面THREE.DoubleSide.

    var material = new THREE.MeshBasicMaterial({
      color: 0xdd00ff,
      // 前面FrontSide  背面:BackSide 双面:DoubleSide
      side:THREE.DoubleSide,
    });
    

    材质透明度.opacity

    通过材质的透明度属性.opacity可以设置材质的透明程度,.opacity属性值的范围是0.0~1.0,0.0值表示完全透明, 1.0表示完全不透明,.opacity默认值1.0。

    当设置.opacity属性值的时候,需要设置材质属性transparent值为true,如果材质的transparent属性没设置为true, 材质会保持完全不透明状态。

    在构造函数参数中设置transparent.opacity的属性值

    var material = new THREE.MeshPhongMaterial({
      color: 0x220000,
      // transparent设置为true,开启透明,否则opacity不起作用
      transparent: true,
      // 设置材质透明度
      opacity: 0.4,
    });
    

    通过访问材质对象属性形式设置transparent.opacity的属性值

      // transparent设置为true,开启透明,否则opacity不起作用
    material.transparent = true;
      // 设置材质透明度
    material.opacity = 0.4;
    

    2、创建纹理贴图

    通过纹理贴图加载器TextureLoaderload()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

    材质的颜色贴图属性.map设置后,模型会从纹理贴图上采集像素值,这时候一般来说不需要在设置材质颜色.color.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

    // 纹理贴图映射到一个矩形平面上
    var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
    // TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
    var textureLoader = new THREE.TextureLoader();
    // 执行load方法,加载纹理贴图成功后,返回一个纹理对象Texture
    textureLoader.load('Earth.png', function(texture) {
      var material = new THREE.MeshLambertMaterial({
        // color: 0x0000ff,
        // 设置颜色纹理贴图:Texture对象作为材质map属性的属性值
        map: texture,//设置颜色贴图属性值
      }); //材质对象Material
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
    
      //纹理贴图加载成功后,调用渲染函数执行渲染操作
      // render();
    })
    

    不同的几何体有不同的UV坐标来设置贴图和模型的映射规律,你可以尝试把颜色纹理贴图映射到不同的几何体上查看渲染效果。

    var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
    var geometry = new THREE.SphereGeometry(60, 25, 25); //球体
    

    纹理对象Texture

    如果你想进一步了解.map的属性值Texture可以阅读下面的代码。

    通过图片加载器ImageLoader可以加载一张图片,所谓纹理对象Texture简单地说就是,纹理对象Texture的.image属性值是一张图片。

    // 图片加载器
    var ImageLoader = new THREE.ImageLoader();
    // load方法回调函数,按照路径加载图片,返回一个html的元素img对象
    ImageLoader.load('Earth.png', function(img) {
      // image对象作为参数,创建一个纹理对象Texture
      var texture = new THREE.Texture(img);
      // 下次使用纹理时触发更新
      texture.needsUpdate = true;
      var material = new THREE.MeshLambertMaterial({
        map: texture, //设置纹理贴图
      });
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
    });
    

    3、重新为地板设置贴图,观察效果

    let buildingObjects = {
        objects: [
            {
                objectName: 'floor',
                objectType: 'cube',
                length: 3400,
                width: 1200,
                height: 1,
                position: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                style:{
                    color: 0x5F7480,
                    image:'./res/floor.jpg',
                    allowRepeat:1
                }
            }
        ]
    }
    

    还记得上节课的时候我们的cube类:

    /**
     * 立方体类
     * 我们生活中很多的物体都可以归结为立方体类,比如墙体,地板,窗户等都可看成是立方体类
     * @param option
     * @constructor
     */
    function Cube(option){
        this.length = option.length || 1;
        this.width = option.width || 1;
        this.height = option.height || 1;
    
        this.Name = option.objName;
    
        this.positionX = option.position.x || 0;
        this.positionY = option.position.y || 0;
        this.positionZ = option.position.z || 0;
    
        this.style=option.style||{color:0xFF0000};
    
        let curmaterial=CommonFunction.createMaterial(this.width,this.height,this.style);
    
        let cubeGeometry = new THREE.BoxGeometry(this.length, this.height, this.width);
    
        let cube = new THREE.Mesh( cubeGeometry, curmaterial );
        cube.name=this.Name;
        cube.position.x=this.positionX;
        cube.position.y=this.positionY;
        cube.position.z=this.positionZ;
        return cube;
    }
    

    我们给地板加上一个纹理贴图,这样就可以让地板显示贴图了。
    在这里插入图片描述

    项目代码

    如果大家需要更加详细的讲解和全部源代码的话,可以看一下我的网易云课堂。当然剩下的博客我也会把核心代码给大家列出来。
    大家可以看看我的网易云课堂

    网易云课堂-threejs3D智能工厂应用

    展开全文
  • 这里总结一下材质 材质种类: MeshBasicMaterial:为几何体赋予一种简单的颜色,或者显示几何体的线框 MeshDepthMaterial:根据网格到相机的距离,该材质决定如何给网格染色 MeshNormalMaterial:根据物体表面的法...

    前言:首先先推荐一篇博客,关于webgl原理,讲的非常之通俗易懂了 图解WebGL&Three.js工作原理  webGL可以理解为openGL ES2.0

    (webGL2.0 - openGL ES3.0)的javascript绑定。所以实现的语言是javascript和opengl(最常用的跨平台图形库)着色语言,webgl是

    HTML5中提出的新技术,是一种3D绘图标准。

    three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Three.js对WebGL提供的接

    口进行了非常好的封装,简化了很多细节,大大降低了学习成本

    我们可能还听说过一个D3.js(Data-Driven Documents),是一个数据可视化的库,技术基础是SVG。兼容性是IE9+,官网(http://d3js.org),

    从官网的example中可以看出,它跟3d视图还是不同的。

    我们只需要从官网上下载一个three.js,然后用script标签引入即可。

    首先注意的一点是,我们在页面上并不需要一个canvas标签,只需要一个盛放canvas的容器就行,canvas是three.js动态生成的。

    01.01 - WebGLRenderer - Skeleton

    #canvas3d{

    width:800px;

    height:450px;

    margin:100px auto;

    }

    threejs里最重要的几个元素,如下:

    var renderer; //渲染器

    var scene;   //场景

    var camera; //相机

    var light;   //光源

    var cube; //物体

    1,生成3d渲染器,设置渲染器的宽高和背景色,(通常我们可以直接获取页面上画布的宽高,便于嵌入改动)

    renderer = new THREE.WebGLRenderer({antialias:true}); //生成渲染器对象(antialias属性:抗锯齿效果为设置有效)

    renderer.setClearColor(0x333333, 1.0);

    //renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.setSize('800', '450');

    2,设置一个场景,也就是一个三维空间,用 [Scene] 类声明一个叫 [scene] 的对象。

    scene = new THREE.Scene();

    3,设置一个摄像机camera,

    OpenGL(WebGL)中、三维空间中的物体投影到二维空间的方式中,存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离,都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体,因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。

    正交投影与透视投影的区别如上图所示,左图是正交投影,物体发出的光平行地投射到屏幕上,远近的方块都是一样大的;右图是透视投影,近大远小,符合我们平时看东西的感觉。

    camera坐标系

    Three中使用采用常见的右手坐标系定位。

    // 四个参数分别代表了摄像机的视角、宽高比、近和远两个视截面。

    //设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far)

    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);

    // position and point the camera to the center of the scene

    camera.position.x = 20;

    camera.position.y = 18;

    camera.position.z = 35;

    camera.lookAt(scene.position); //设置视野的中心坐标

    4,设置光源light

    OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗.

    //设置light

    light = new THREE.DirectionalLight(0xff0000, 1.0, 0); //设置平行光

    light.position.set( 200, 200, 200 ); //设置光源向量

    scene.add(light); // 追加光源到场景

    5,设置物体 object

    在three.js中,我们使用Mesh模型,Mesh的构造函数是这样的:Mesh( geometry, material ) geometry是它的形状,material是它的材质。 三维模型通常用三角形的网格来描述

    对于图中的兔子,随着三角形数量的增加,它的表面越来越平滑/准确

    我们这里是一个立方体 cube

    var cubeGeometry = new THREE.BoxGeometry(20, 10, 15,2,3,1); //设置长宽高 以及对应长宽高的分段,在使用线模式({wireframe:true})进行渲染的时候可以看到效果

    var cubeMaterial = new THREE.MeshNormalMaterial({wireframe : true}); //材质

    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    var border = new THREE.EdgesHelper( cube,0xffff00 ); //添加边框

    scene.add(cube);

    scene.add(border);

    6,最后一步,进行渲染

    //将渲染器的元素添加到页面中

    document.getElementById('canvas3d').appendChild(renderer.domElement);

    renderer.render(scene, camera);

    完整的代码已经上传到github上: github(three-one)  如果你觉得我写的对你有所帮助的话,请给我个star吧,谢谢

    最后的效果图如下:

    在上面的学习基础上,我们继续深入的探究一下,如何给3d视图添加动画,纹理等;

    1,首先我们在上面的基础上,添加多个立体几何图形

    //立方体

    var cubeGeometry = new THREE.BoxGeometry(15,15,15,1,1,1);

    var cubeMaterial = new THREE.MeshNormalMaterial({wireframe : true}); //材质

    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    var border = new THREE.EdgesHelper( cube,0xffff00 ); //添加边框

    scene.add(cube);

    scene.add(border);

    //圆柱体

    var cylinderGeometry = new THREE.CylinderGeometry(8, 8,10,30,30);

    var cylinderMaterial = new THREE.MeshNormalMaterial();

    var cylinder = new THREE.Mesh(cylinderGeometry,cylinderMaterial);

    cylinder.position.x = -10;

    cylinder.position.y = -5;

    cylinder.position.z = 25;

    cylinder.castShadow = true;

    scene.add(cylinder);

    //球体

    var sphereGeometry = new THREE.SphereGeometry(7, 25, 25);

    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});

    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    // position the sphere

    sphere.position.x = 0;

    sphere.position.y = 0;

    sphere.position.z = 0;

    sphere.castShadow = true;

    // add the sphere to the scene

    scene.add(sphere);

    //圆环

    var torusGeometry = new THREE.TorusGeometry(10,3,20,20);

    var torusMaterial = new THREE.MeshBasicMaterial();

    var tours = new THREE.Mesh(torusGeometry,torusMaterial);

    tours.position.x = 10;

    tours.position.y = -10;

    tours.position.z = -40;

    tours.castShadow = true;

    scene.add(tours);我们通过position属性

    调整立体几何在scene中的位置(x,y,z)

    创建几何体时有一点强调的是,对于参数的设置,例如创建圆环的时候,

    THREE.TorusGeometry(10,3,20,20)

    我们第三四个参数分割比的值越大,立体几何中拼凑的平面图形就越多,立体几何就越圆滑,就是上一篇博客中兔子的那个原理。

    2,添加动画

    我们要针对每个几何体添加不同的动画,所以就需要为每个几何体添加一个name属性来指定,比如:

    cube.name = 'cube';

    cylinder.name = 'cylinder';

    然后在render函数中,用getObjectByName获取到对应的几何体,用setInterval的思想原理,通过requestAnimationFrame函数使得几何体动起来

    scene.getObjectByName('cube').rotation.x += control.rotationSpeed;

    scene.getObjectByName('cube').scale.set(control.scale, control.scale, control.scale);

    scene.getObjectByName('cylinder').rotation.z += control.rotationSpeed2;

    scene.getObjectByName('tours').rotation.z += 0.05;

    requestAnimationFrame(render);

    3,stats性能插件

    stats.js用于对JavaScript进行性能检测。

    我们创建一个createStats的函数,然后在init初始化中调用它

    function createStats() {

    var stats = new Stats();

    stats.setMode(0);

    stats.domElement.style.position = 'absolute';

    stats.domElement.style.left = '0px';

    stats.domElement.style.top = '5px';

    return stats;

    }

    需要特别注意的一点是,我们需要在render函数中不断的更新stats显示

    stats.update();

    dat.gui.js用于创建菜单栏,可以用来控制场景中的各个参数来调试场景。

    function addControls(controlObject){

    var gui = new dat.GUI();

    gui.add(controlObject,'rotationSpeed',-0.1,0.1);

    gui.add(controlObject, 'scale', 0.01, 2);

    gui.add(controlObject, 'rotationSpeed2', -0.1, 0.1);

    }

    创建addControls函数,然后在init初始化函数中设置默认值,并调用这个函数

    control = new function (){

    this.rotationSpeed = 0.005;

    this.scale = 1;

    this.rotationSpeed2 = 0.05;

    }

    addControls(control);

    4,添加纹理

    这个首先注意的就是图片应该是异步获取的,所以你可以放在本地的apache中,也可以自己用nodejs非常方便的搭建一个服务器,不然的话,他就会报错,跨域了。

    var texture = new THREE.ImageUtils.loadTexture("http://10.1.26.29:84/Brick-2399.jpg");

    torusMaterial.map = texture;

    最后的效果图如下:

    完整的代码:github(threejs-two)  如果你觉得我写的对你有帮助的话,请给我个star吧,谢谢,我会继续更新下去的

    5,最后,从完整的代码中,我们可以看出,关于材质,我们也是调用了不同的函数,这里总结一下材质

    材质种类:

    MeshBasicMaterial:为几何体赋予一种简单的颜色,或者显示几何体的线框

    MeshDepthMaterial:根据网格到相机的距离,该材质决定如何给网格染色

    MeshNormalMaterial:根据物体表面的法向量计算颜色

    MeshFaceMaterial:这是一种容器,可以在该容器中为物体的各个表面上设置不同的颜色

    MeshLambertMaterial:考虑光照的影响,可以创建颜色暗淡,不光亮的物体

    MeshPhongMaterial:考虑光照的影响,可以创建光亮的物体

    ShaderMaterial:使用自定义的着色器程序,直接控制顶点的放置方式,以及像素的着色方式。

    LineBasicMaterial:可以用于THREE.Line几何体,从而创建着色的直线

    LineDashedMaterial:类似与基础材质,但可以创建虚线效果

    (1)MeshBasicMaterial:不考虑光照的影响。

    属性:

    color

    wireframe

    wireframeLinewidth

    wireframeLinecap:线段端点如何显示。可选值有:butt(平)、round、square。默认是round。WebGLRenderer对象不支持该属性。

    wireframeLinejoin:线段连接点如何显示。可选值有:round、bevel(斜角)、miter(尖角)。默认是round。WebGLRenderer对象不支持属性。

    shading:着色模式。可选值:THREE.SmoothShading、THREE.FlatShading。

    vertexColors:为每个顶点定义不同的颜色。在CanvasRenderer对象中不起作用。

    fog:指示当前是否会受全局雾化效果设置的影响。

    两种设置属性的方式:

    //1.构造函数

    var meshMaterial = new THREE.MeshBasicMaterial({color:0xffccff});

    //2属性

    meshMaterial.visible = false;

    (2)MeshDepthMaterial

    使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合,从而很容易创建逐渐消失的效果。

    只有两个控制线框的属性:

    wireframe

    wireframeLinewidth

    可以通过设置相机的near和far的值,来控制创建中使用这种材质的物体的消失速度。如果near和fat之间的差值越大,那么物体远离相机时,只会稍微消失一点;反之,物体消失的效果非常明显。

    var cubeMaterial = new THREE.MeshDepthMaterial();

    var colorMaterial = new THREE.MeshBasicMaterial({color:0x00ff00,transparent:true,blending:THREE.MultiplyBlending});

    var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry,[colorMaterial,cubeMaterial]);

    cube.children[1].scale.set(0.99,0.99,0.99);//避免渲染遮挡而造成的闪烁

    (3)MeshNormalMaterial

    法向量的作用: 决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。

    属性:

    wireframe

    wireframeLinewidth

    shading

    for(var f = 0 , f1 = sphere.geometry.faces.length; f < f1 ; f++){

    var face = spere.geometry.faces[f];

    var arrow = new THREE.ArrowHelper(face.normal,face.centroid,2,0x3333ff);

    spere.add(arrow);

    }

    在球体的每个面上添加了一个长度为2,颜色为0x3333ff的箭头

    (4)MeshFaceMaterial

    可以为几何体的每一个面指定不同的材质。

    假设有一个正方体,可以为每个面指定不同的颜色。

    var matArray = [];

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));

    var faceMaterial = new THREE.MeshFaceMaterial(matArray);

    var cubeGeometry = new THREE.CubeGeometry(3,3,3);

    var cube = new THREE.Mesh(cubeGeometry,faceMaterial);

    (5)MeshLambertMaterial

    对光源有反应。

    基本属性:

    color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

    独特属性:

    ambient:和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。

    emissive:该材质发射的属性。不像是光源,只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。

    (6)MeshPhongMaterial

    基本属性:

    color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

    独特属性:

    ambient

    emissive

    specular:指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色,将会得到一种更加类似金属的材质。如果设置为灰色,材质将变得更像塑料。

    shininess:指定高光部分的亮度。默认是30.

    (7)ShaderMaterial

    属性:

    wireframe

    wireframeLinewidth

    shading

    vertexColor

    fog:指示当前是否会受全局雾化效果设置的影响。

    独特属性:

    fragmentShader:定义每个传入的像素的颜色。

    vertexShader:允许你修改每一个传入的顶点的位置

    uniforms:该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。

    defines:该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。

    attributes:该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性,辣么你要为几何体中的所有顶点提供信息。

    lights:定义光照数据是否传递给着色器。默认是false。

    独特属性:

    fragmentShader:定义每个传入的像素的颜色。

    vertexShader:允许你修改每一个传入的顶点的位置

    uniforms:该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。

    defines:该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。

    attributes:该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性,辣么你要为几何体中的所有顶点提供信息。

    lights:定义光照数据是否传递给着色器。默认是false。

    (8)LineBasicMaterial

    基本属性:

    color

    lineWidth

    LineCap:butt、round、square。默认是round。WebGLRenderer不支持该属性。

    LineJoin:round、bevel(斜切)、miter(尖角)。默认是round。WebGLRenderer不支持该属性。

    vertexColors:该属性值设置为 THREE.VertexColors值时,就可以为每个顶点指定一种颜色。

    fog:指定当前物体是否受全局雾化效果的影响。

    (9)LineDashedMaterial

    和LineBasicMaterial有着一样的属性,但是有几个额外的属性,可以用来定义短划线长度和短划线中间空格长度的属性。

    独特属性:

    scale:缩放dashSize和gapSize。如果scale<1,则dashSize和gapSize就会增大。

    dashSize:短线划的长度

    gapSize:间隔的长度

    展开全文
  • 图6-6 6.2 标准基本体 10种标准几何体非常易于建立,只需单击拖曳鼠标,交替几次即可完成,大多数几何体还可通过键盘输入来创建。 每一种几何体都有多个参数,以控制产生不同形态的几何体,如锥体工具就可以产生...
  • 医械研发:常见医用塑料种类、特性与选用知识汇总 根据医疗器械制品的结构和强度要求,我们来选择合适的塑料类型和恰当的牌号,并确 定材料的加工工艺。这些性能包括加工性能、力学强度、使用成本、装配方式、可灭菌...
  • 几何体是第一个被渲染的对象。 一,预通道/Early Z Pass(这里的Z是深度) 此时我们知道了所有需要被渲染的对象以及对象的位置,但是不知道渲染的顺序,也就是不知道哪些对象应该首先被渲染,哪些对象应该之后被...
  • 神经网络学习小记录54——Keras搭建常见分类网络平台(VGG16、MobileNet、ResNet50)学习前言源码下载分类网络的常见形式分类网络介绍1、VGG16网络介绍2、MobilenetV1网络介绍3、ResNet50网络介绍a、什么是残差网络b...
  • 除了几何表示之外,隐式曲面还可以通过其他隐式曲面的交并补得到对应的隐式曲面 比如下图 还有下图 通过对隐式曲面的交并补操作,可以得到稍微复杂的曲面。 除了上述两种方式外,还可以使用符号距离函数和...
  • 我们的方法,称为深度立体几何网络(DSGN),通过在一种可微分的体积表示(3D几何体)上检测3D目标来显著缩小这一差距,该方法有效地编码了3D规则空间的3D几何结构。通过这种表示,我们可以同时学习深度信息和语义线索...
  • 上一篇文章介绍了OpenCV入门知识,包括OpenCV常见数据类型、显示图像、读取像素、修改像素、创建图像、复制图像、保存图像等内容。这篇文章将详细讲解如何使用OpenCV绘制各类几何图形,包括cv2.line()、v2.circle()...
  • 科学-几何几何

    2019-03-07 15:56:00
    ylbtech-科学-几何几何 几何,就是研究空间结构及性质的一门学科。它是数学中最基本的研究内容之一,与分析、代数等等具有同样重要的地位,并且关系极为密切。...常见定理有勾股定理,欧拉定理,斯图尔...
  • 计算几何题集

    2014-07-26 17:18:13
    分类: 计算几何 2014-04-19 23:29 86人阅读 评论(0) 收藏 举报 小媛在努力大大题集:点这里 POJ 计算几何入门题目推荐  其实也谈不上推荐,只是自己做过的题目而已,甚至有的题目尚未AC,让在挣扎...
  • 第六讲 Keras实现手写字体识别分类

    千次阅读 2022-01-25 11:29:28
    一 本节课程介绍 1.1 知识点 1、图像识别分类相关介绍; 2、Mnist手写数据集介绍; 3、标准化数据预处理; 4、实验手写字体识别 ...2.1.1 常见的预处理方法 (1)灰度化:将RGB图像改为灰度图像,主要有分量法、
  • 常见的三维数据类型

    千次阅读 2021-03-10 16:32:44
    常见的三维数据类型 一、OSGB 目前市面上生产的倾斜模型,尤其Smart3D处理的倾斜摄影三维模型数据的组织方式一般是二进制存贮的、带有嵌入式链接纹理数据(jpg)的OSGB格式。Open Scene Gragh Binary是OSGB的全称,...
  • 常见芯片封装类型的汇总(转载)

    千次阅读 2020-06-02 14:05:45
    当然,也可以直接插在有相同焊孔数和几何排列的电路板上进行焊接。DIP封装的芯片在从芯片插座上插拔时应特别小心,以免损坏引脚。 DIP封装结构形式有多层陶瓷双列直插式DIP,单层陶瓷双列直插式DIP,引线框架式DIP...
  • 在本文中,我们将介绍常见的图表类型,并了解它们的应用场景。 因此,通过这种方式,我们可以使用适当的图表类型,这将有助于获取数据的特征。 要获得有关数据可视化的详细介绍,您可以参考文章- 什么和为什么进行...
  • 几何变换非常常见,在计算机视觉和图形学上更是如此,而这里指的几何一般是由点,线,面等几何元素组成的1,2维或3维图形。几何变换能够实现不同空间几何元素的对应,在很多领域中有着非常多的应用,立体视觉便是...
  • 常见的网络结构

    千次阅读 2017-03-15 11:17:00
    随着深度学习的普及开来,设计一...目前常见的网络结构:AlexNet、ZF、GoogLeNet、VGG、ResNet等等都可谓曾一战成名,它们都具有自身的特性,它们都提出了创新点。设计一个优秀网络的第一步是学习这些优秀的网络。 ...
  • 几何光学概论

    2019-04-17 16:51:00
    几何光学概论 几何光学概论 1-1 光 谱 光的整个行为我们可用电磁波的方式来表示。假设光以波长作为一个单位,我们可以从光谱图得知可见光的波谱是在400到700nm,故可见光在光谱中呈现出非常窄的范围...
  • 展开式调色盘的颜色分类展示效果良好,并且颜色对应 Copic 马克笔色号的设计对于常使用马克笔的设计草图或插画而言非常实用。 但也由于与众不同的界面设计思路,部分功能和一般绘图工具的表现方式不同,可能需要一段...
  • 常见操作有模糊、灰度化、增强对比度等。  可以简单地理解为: 图像学更侧重于图像的字母表和语法部分;而计算机视觉更侧重于图像从语法到语义的部分;而数字图像处理侧重于图像的状态空间转化过程及总结其一般...
  • 方法同样也层出不穷,我们将这些方法依据原理分为两类:•基于传统多视图几何的三维重建算法•基于深度学习的三维重建算法总地来说,尽管目前传统的三维重建算法依旧占据研究的主要部分,但是越来越多的研究者开...
  • 常见的特征点算法

    千次阅读 2019-06-25 15:28:20
    纹理特征刻画了图像中重复出现的局部模式与他们的排列规则,常用于图像分类和场景识别。其只能反映物体表面的特性,无法完全反映出物体的本质属性,所以仅仅利用纹理特征无法获得图像的高层次内容。 优点: 具有...
  • 几何造型系统中,有三种描述物体的三维模型: 1、线框模型 线框模型用顶点和棱边来表示物体,但它不能表示表面含有曲面的物体,且不能明确地 定义给定点与物体之间的关系。 2、曲面模型 在线框模型的基础上,增加...
  • 常见GIS工具软件介绍

    千次阅读 2019-02-28 16:31:21
    6)Citystar遥感图像处理模块:提供了从遥感图像纠正到增强、变换、分类以提取专题信息整个流程的功能。 7)Citystar数字地形模块:等值线、离散点插值生成DEM,并基于DEM进行各种分析。 8)Citystar三维模块:...
  • 这一讲主要讲“图形与几何”这个领域的变化。新课标在图形与几何领域有几个核心概念。主要有 空间观念、 几何直观、 推理能力 等 。空间观念主要是指根据物体特征抽象出几何图形,根据几何图形想象出所描述的实际...
  • 网页设计中常用字体

    千次阅读 2016-10-24 16:03:34
    1.网页设计中的英文字体,一般有以下五类: ...在常见的两种字体风格中,衬线体的笔划感太”过”,不是特别的商业。随着瑞士设计风格的大力推广,无衬线字体变得愈发流行起来。 建议: 个人认为 Tahoma 以及 Ver
  • 常见的图像特征

    万次阅读 多人点赞 2019-07-05 19:45:25
    由于HOG是在图像的局部方格单元上操作,所以它对图像几何的和光学的形变都能保持很好的不变性。 在粗的空域抽样、精细的方向抽样以及较强的局部光学归一化等条件下,只要行人大体上能够保持直立的姿势,可以容许...
  • 该字体包括了许多常见的形状和五官动作同时也包含了世界上常见的符号,比如六芒星形和黄道带标志。该字体没有被编入Unicode,虽然它的很多符号已经在该系统中可调用。 在WPF程序中,如果需要,可以很方便的使用它们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,538
精华内容 3,015
关键字:

常见几何体的分类