我不想做webgl4:three js 初步学习3

精灵模型Sprite

通过Sprite创建精灵模型不需要几何体，只需要给构造函数Sprite的参数设置为一个精灵材质SpriteMaterial即可。

精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的基类是材质Material。

var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
  color:0xff00ff,//设置精灵矩形区域颜色
  rotation:Math.PI/4,//旋转精灵对象45度，弧度值
  map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象，不需要几何体geometry参数
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精灵大小，比如可视化中精灵大小表征数据大小
sprite.scale.set(10, 10, 1);  只需要设置x、y两个分量就可以

scale和 position一般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性.position实现

实现树林效果

// 加载树纹理贴图
var textureTree = new THREE.TextureLoader().load("tree.png");
// 批量创建表示一个树的精灵模型
for (let i = 0; i < 100; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//设置精灵纹理贴图
  });
  // 创建精灵模型对象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精灵大小,
  sprite.scale.set(100, 100, 1);  只需要设置x、y两个分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 设置精灵模型位置，在xoz平面上随机分布
  sprite.position.set(1000 * k1, 50, 1000 * k2)
}

 // 创建一个草地地面
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加载草地纹理贴图
var texture = new THREE.TextureLoader().load("grass.jpg");
// 设置纹理的重复模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0x777700,
  // map:texture,
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
mesh.rotateX(-Math.PI/2);

实现雨滴效果

通过渲染函数来更新实现雨滴的动态移动。

// 渲染函数
function render() {
  // 每次渲染遍历雨滴群组，刷新频率30~60FPS，两帧时间间隔16.67ms~33.33ms
  // 每次渲染都会更新雨滴的位置，进而产生动画效果
  group.children.forEach(sprite => {
    // 雨滴的y坐标每次减1
    sprite.position.y -= 1;
    if (sprite.position.y < 0) {
      // 如果雨滴落到地面，重置y，从新下落
      sprite.position.y = 200;
    }
  });
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

加载模型文件

JSON（.js/ .json）
专门为Three.js自己设计的JSON格式，你可以使用它以声明的方式定义模型，及模型材质和动画。
obj (.obj)
OBJ文件是Alias|Wavefront公司为它的一套基于工作站的3D建模和动画软件"Advanced Visualizer"开发的一种标准3D模型文件格式，很适合用于3D软件模型之间的互导。目前几乎所有知名的3D软件都支持OBJ文件的读写。OBJ文件是一种文本文件，可以直接用写字板打开进行查看和编辑修改
3ds (.3ds)
3ds是3ds max通用储存文件格式。使用的范围更宽，可被更多的软件识别使用.
BVH (.bvh)
BVH是BioVision等设备对人体运动进行捕获后产生文件格式的文件扩展名,BVH文件包含角色的骨骼和肢体关节旋转数据。BVH 是一种通用的人体特征动画文件格式,，广泛地被当今流行的各种动画制作软件支持。通常可从记录人类行为运动的运动捕获硬件获得。
OpenCTM (.ctm)
OpenCTM格式的3D模型文件,OpenCTM 格式文件是二进制文件，相比于 stl 格式的文件，它将不承载除模型三角面片信息以外的信息,一个 OpenCTM 文件仅包含一个 Mesh,一个文件主要分成Mesh 的顶点信息和Mesh 的面片信息。(有C++API)
stl(.stl)
STL是用三角网格来表现3D CAD模型。文件格式简单，只能描述三维物体的几何信息，不支持颜色材质等信息，是计算机图形学处理CG、数字几何处理如CAD、 数字几何工业应用, 如三维打印机支持的最常见文件格式。
sea3d(.sea3d)
sea3d为游戏而生的一种开源的格式与工具，可导出动画, 纹理, 材质, 骨骼 ( Skin ), 顶点动画, 变形, 相机, 光源, 环境和辅助.

// An highlighted block
var foo = 'bar';

// An highlighted block
var foo = 'bar';

// An highlighted block
var foo = 'bar';