three 精灵对象模拟下雨 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  
  <script src="/js/threejs/threer92.js"></script>
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
</head>

<body>
  <script>
	//创建场景
    var scene = new THREE.Scene();

/**
 * 精灵创建下雨效果
 */
// 加载雨滴理贴图
var textureTree = new THREE.TextureLoader().load("/img/threejs/rain.png");
	  var group = new THREE.Group();
// 批量创建表示雨滴的精灵模型
for (let i = 0; i <800; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//设置精灵纹理贴图
  });
  // 创建精灵模型对象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精灵大小,
  sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 设置精灵模型位置，在整个空间上上随机分布
  sprite.position.set(600 * k1, 300 * Math.random(), 600 * k2);
  group.add(sprite);
}
scene.add(group);//雨滴群组插入场景中
	  
	  
	  /**
 * 创建一个草地地面
 */
var geometry = new THREE.PlaneGeometry(1000,1000); //矩形平面
// 加载草地纹理贴图
var texture = new THREE.TextureLoader().load("/img/threejs/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);
	  
	  
	  
	  
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0xaaaaaa);
    scene.add(ambient);

/**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度

/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(220, 100, 220);//设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0x000000, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);

</script>
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="/js/threejs/threer92.js"></script>
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
</head>
​
<body>
  <script>
    //创建场景
    var scene = new THREE.Scene();
​
/**
 * 精灵创建下雨效果
 */
// 加载雨滴理贴图
var textureTree = new THREE.TextureLoader().load("/img/threejs/rain.png");
      var group = new THREE.Group();
// 批量创建表示雨滴的精灵模型
for (let i = 0; i <800; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//设置精灵纹理贴图
  });
  // 创建精灵模型对象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精灵大小,
  sprite.scale.set(8, 10, 1); //// 只需要设置x、y两个分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 设置精灵模型位置，在整个空间上上随机分布
  sprite.position.set(600 * k1, 300 * Math.random(), 600 * k2);
  group.add(sprite);
}
scene.add(group);//雨滴群组插入场景中
      
      
      /**
 * 创建一个草地地面