three.js学习二

物体：
物体由两部分组成，材质和形状
形状：
物体的形状，球体，正方体，线条，粒子等
直线线条：

var material = new THREE.LineBasicMaterial({//这是线段材质color: 0x0000ff
});var points = [];//折线端点
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );var geometry = new THREE.BufferGeometry().setFromPoints( points );
//折线段
var line = new THREE.Line( geometry, material );
scene.add( line );

曲线：
曲线就是把将线条拆分成许多个直线段连接，达到曲线的效果

var curve = new THREE.EllipseCurve(//椭圆0,  0,            // ax, aY 圆心10, 20,           // xRadius, yRadius椭圆长宽，设置相等即为一个圆0,  2 * Math.PI,  // aStartAngle, aEndAngle开始弧度，结束弧度false,            // aClockwise是否顺时针绘制0                 // aRotation 旋转角度
);var points = curve.getPoints( 50 );//拆分
var geometry = new THREE.BufferGeometry().setFromPoints( points );var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );// Create the final object to add to the scene
var ellipse = new THREE.Line( geometry, material );

还有其他的曲线如贝塞尔曲线，具体信息请查阅官网three.js

2D：
2D和3D的图形基本都有BufferGeometry和Geometry两种类型，Geometry是BufferGeometry的一种用户友好的替代方法。更易于阅读和编辑，但效率不如BufferGeometry。BufferGeometry适用于大型或严格的项目。二者使用方法都差不多。

类型	用法
平面几何	THREE.PlaneGeometry( 5, 20, 10 ,10);
圆几何	THREE.CircleGeometry( 5, 32 ,0,2*PI)
环形几何	THREE.RingGeometry( 1, 5, 32, 8 , 0 , 2*PI )
多边形几何	THREE.ShapeGeometry( shape )shape为多边形

平面几何：

var geometry = new THREE.PlaneGeometry(10, 20, 32, 32);
//x轴长度（宽），y轴长度（高）
//x轴切片数，y切片数  默认值都为1 ，可不写
var material = new THREE.MeshBasicMaterial({color: 0xffff00,
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

圆几何：

var geometry = new THREE.CircleGeometry( 5, 32,0,2*Math.PI );
//半径，
//切片数，最小值为3，默认值为8，一般设置为32比较像一个圆，太小了看起来像多边形
//画圆开始的地方 ，可不写
//总弧度，0-2*PI,2*PI表示一个完整的圆 ，可不写
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );

环形几何：

var geometry = new THREE.RingGeometry(1, 5, 32, 8, 0, 2 * Math.PI);
//内圈半径，默认值为0.5
//外圈半径，默认值为1
//切片数，最小值为3，默认值为8，一般设置为32比较像一个圆，太小了看起来像多边形
//纵方向的切片数，就是外圈到内圈方向，最小值为1.默认值为8，可不写
//开始的位置，默认为0 ，可不写
//总弧度，0-2*PI,2*PI表示一个完整的圆，默认为完整的圆 ，可不写
var material = new THREE.MeshBasicMaterial({color: 0xffff00,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

多边形几何：
即自定义几何形状

var x = 0, y = 0;
var heartShape = new THREE.Shape();
//创建一个形状
heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
//画出图形
var geometry = new THREE.ShapeGeometry( heartShape );
//创建几何
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

var heartShape = new THREE.Shape();
Shape()共有以下几种绘画方式：

.moveTo ( x : Float, y : Float ) :
创建一个新路径，并把画笔位置移到固定位置
.lineTo ( x : Float, y : Float ) : this
画一个直线
.quadraticCurveTo ( cpX : Float, cpY : Float, x : Float, y : Float ) : this
二次贝塞尔曲线
.bezierCurveTo ( cp1X : Float, cp1Y : Float, cp2X : Float, cp2Y : Float, x : Float, y : Float ) : this
贝塞尔曲线
.splineThru ( points : Array ) : this
将曲线数组连接到当前路径

3D：

类型	用法
长方体	THREE.BoxGeometry( 1, 1, 1 )
四面体	THREE.TetrahedronGeometry( 10，0)
八面体	THREE.OctahedronGeometry( 10，0 )
十二面体	THREE.DodecahedronGeometry(10，0 )
二十面体	THREE.DodecahedronGeometry(10，0 )
球体	THREE.SphereGeometry( 5, 32, 32 )
圆柱体	THREE.CylinderGeometry(5,5,20)
圆锥体	THREE.ConeGeometry(5,5,20)
圆环几何	THREE.TorusGeometry( 10, 3, 16, 100 );
管道体	THREE.TubeGeometry( path, 20, 2, 8, false )
圆环结	THREE.TorusKnotGeometry( 10, 3, 100, 16 )
车床几何	THREE.LatheGeometry( points )
挤压几何	THREE.ExtrudeGeometry( shape, extrudeSettings )
参数几何	THREE.ParametricGeometry(function, slices, stacks)
文字	THREE.TextGeometry(‘Hello three.js!’,option)

长方体：

var geometry = new THREE.BoxGeometry( 10, 10, 10, 1, 1, 1 );
//width —宽度；即，平行于X轴的边的长度。可选的; 默认值为1
//height —高度；即，平行于Y轴的边缘的长度。可选的; 默认值为1
//depth —深度；默认为1 。即，平行于Z轴的边的长度。可选的; 默认为1
//widthSegments —沿边的宽度分割的矩形面的数量。可选的; 默认为1
//heightSegments —沿边的高度分割的矩形面的数量。可选的; 默认值为1
//depthSegments —沿边的深度分割的矩形面的数量。可选的; 默认为1。
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

四面体：

var geometry = new THREE.TetrahedronGeometry( 10,0);
//直径
//默认值为0，int 当值不为0时是其他的多面体，取值为5以上接近于一个球体
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

八面体：

var geometry = new THREE.OctahedronGeometry( 10,0);
//使用方法和参数与四面体一样，接近于球体的指数不一样而已

十二面体和二十面体同理：

var geometry = new THREE.DodecahedronGeometry( 10,0);
//十二面体var geometry = new THREE.IcosahedronGeometry( 10,0);
//二十面体

球体：

var geometry = new THREE.SphereGeometry( 15, 32, 32 );
//radius —球体半径。默认值为1 所有值都为可选
//widthSegments —水平线段数。最小值为3，默认值为8，不同半径取不同值趋近于圆，一般取值32即可趋近于圆
//heightSegments —垂直线段数。最小值为2，默认值为6，取值32趋近于圆
//phiStart-指定水平起始角度。默认值为0
//phiLength-指定水平扫角大小。默认值为Math.PI *2
//thetaStart-指定垂直起始角度。默认值为0
//thetaLength-指定垂直扫角大小。默认值为Math.PI*2。
//通过绕Y轴（水平扫描）和Z轴（垂直扫描）扫掠并计算顶点来创建几何。因此，可以通过使用phiStart，phiLength，thetaStart和thetaLength的不同值来创建不完整的球体（类似于“球体切片”），以便定义我们开始（或结束）计算这些顶点的点。
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

圆柱体：

var geometry = new THREE.CylinderGeometry(5,5,20,32,1,false,0,2*MATH.PI);
//radiusTop —圆柱顶部的半径。默认值为1，取0则为圆锥
//radiusBottom —底部圆柱的半径。默认值为1
//height —圆柱体的高度。默认值为1
//radiusSegments—圆柱周围的分段面数。默认值为8，取值大小决定是否接近圆
//heightSegments —沿着圆柱体高度的面的行数。默认值为1
//openEnded —布尔值，指示圆柱体的端部是开放的还是封闭的。默认值为false，表示封闭
//thetaStart —第一段的起始角度，默认为0（三点钟位置）。
//thetaLength —圆形扇区的中心角，通常称为theta。默认值为2 * Pi，完整的圆柱体。
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

圆锥体：

var geometry = new THREE.ConeGeometry( 5,20,32,1,false,0,2*MATH.PI);
//取值和圆柱一样，没有上半径
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cone = new THREE.Mesh( geometry, material );
scene.add( cone );

圆环几何：

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
//radius-圆环的半径，从圆环的中心到管的中心。默认值为1
//tube —管的半径。默认值为0.4。
//radiusSegments —默认值为8，设置为2则为平面环形
//tubularSegments —默认值为6，趋近于圆
//arc—中心角。默认值为Math.PI * 2。
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );

管道体：

function CustomSinCurve( scale ) {THREE.Curve.call( this );this.scale = ( scale === undefined ) ? 1 : scale;
}CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
CustomSinCurve.prototype.getPoint = function ( t ) {var tx = t * 3 - 1.5;var ty = Math.sin( 2 * Math.PI * t );var tz = 0;return new THREE.Vector3( tx, ty, tz ).multiplyScalar(this.scale );
};
//声明了一个CustomSinCurve类，这个类继承自THREE.Curve类，然后重写了类的getPoint方法。
//在THREE.Curve类中getPoint方法的描述：返回在曲线中给定位置 t 的向量
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
//path — Curve - （曲线，路径，即管道的形状）
//tubularSegments — Integer - default is 64（管道分成多少段）
//radius — Float -  default is 1（管道的半径）
//radialSegments — default is 8 （管道口分成多少段，即管道口是几边形）
//closed —  default is false （是否闭合管道，首尾相接的意思）
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

圆环结：

var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ,5,7);
//radius-圆环的半径。默认值为1。
//tube —管的半径。默认值为0.4。
//LinearSegments —默认值为64。
//radiusSegments —默认为8。
//p —该值确定几何体绕其旋转对称轴缠绕多少次。默认值为2。
//q-该值确定几何体在圆环内部绕一圈缠绕多少次。默认值为3。
//如果p和q不互质，则结果将为环面链接。
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

车床几何：
创建具有轴向对称性的网格（如花瓶）。车床绕Y轴旋转

var points = [];
for ( var i = 0; i < 10; i ++ ) {points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
//点集合，形成曲线
var geometry = new THREE.LatheGeometry( points );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

挤压几何：
将2D形状拉伸为3D几何形状

var length = 12, width = 8;
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );
var extrudeSettings = {curveSegments : 16,//曲线上的点数。默认值为12。steps: 2,//用于沿拉伸样条深度切片。默认值为1。depth: 16,//深度以挤压形状。默认值为100bevelEnabled: true,//将斜角应用于形状。默认为true。bevelThickness: 6,//斜角进入原始形状的深度。默认值为6。bevelSize: 1,//与斜角延伸的形状轮廓的距离。默认值为bevelThickness-2。bevelOffset: 0,//距斜角起始形状轮廓的距离。默认值为0。bevelSegments: 1,//斜角层数。默认值为3。趋近圆润//extrudePath: 1,//THREE.Curve。3D样条线路径，应沿着该路径拉伸形状。路径拉伸不支持斜角。//UVGenerator —对象。提供UV generator functions
};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

参数几何：
可以根据传入的公式，计算出相应的几何体

var radialWave = function (u, v) {var r = 50;  var x = Math.sin(u) * r;var z = Math.sin(v / 2) * 2 * r;var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8;  return new THREE.Vector3(x, y, z);
};
var geometry = new THREE.ParametricGeometry( radialWave, 25, 25 );
//slices    该属性定义u值应该分成多少份
//stacks    该属性定义v值应该分成多少份
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var radialWave= new THREE.Mesh( geometry, material );
scene.add( radialWave);

可以参考更多

文字：
THREE.js通过把文字设成Geometry类来创建三维文字
需要用到THREE.FontLoader()函数来加载字体文件，字体文件需要下载同一项目文件夹下

var loader = new THREE.FontLoader();
var geometry;
loader.load('helvetiker_regular.typeface.json',//下载好的字体文件
//加载好字体后创建三维文字function(font) {geometry = new THREE.TextGeometry('Hello three.js!', {//文字font: font,size: 50,//字体大小height: 5,//挤出文字的厚度。默认值为50curveSegments: 12,//曲线上的点数。默认值为12。bevelEnabled: true,//打开斜角。默认值为FalsebevelThickness: 10,//文字斜角的深度如何。默认值是10。bevelSize: 8,//距文字轮廓多远是斜角。默认值为8。bevelSegments: 5//斜角段的数量。默认值为3。});//创建材质
var meshMaterial = new THREE.MeshNormalMaterial({flatShading: THREE.FlatShading,transparent: true,opacity: 0.9
});
var mesh = new THREE.Mesh(geometry, meshMaterial);
mesh.position.set(-300, 0, 0);
scene.add(mesh);
},
//加载进度
function(xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},//出现错误
function(err) {console.log(err);}
);

材质：
材质可以理解为皮肤，一个球体，可以是篮球也可以是足球，材质决定他的类别

three.js学习二相关推荐

网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
Three.js学习二——Three.js极简入门
目录准备开发环境掌握一些概念性知识编码测试创建一个场景(Creating a scene) 创建一个场景渲染场景使立方体动起来结果准备开发环境 1.一台可用浏览器的带文件系统的电脑: ...
three.js学习(二)
组.交互.dat.gui的使用 1.组就像可以把一些THREE创建的物体放到场景里一样,也可以把物体放到组里,然后再把组放到场景里为什么要这么做呢 ?(这不是脱裤子放屁) 可以把放进组的物体看作一 ...
JS高级的学习(二)
JS高级的学习(二) set对象 Set 是一个对象存放数据数据永远不会重复 Set 当成是一个数组遍历使用数组方法 find findIndex Map 数组转成 Set对象 const ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Lodash.js学习（二）——difference深度理解
前言前面初始了lodash,涉及到的几个方法也比较简单,因此没有进行具体的讲解,这篇文章将对difference.differenceBy,differenceWith进行深度的讲解 _.diffe ...

three.js学习二

three.js学习二相关推荐

最新文章

热门文章