three.js 精灵模型Sprite模拟树林效果

最新推荐文章于 2024-01-07 07:59:44 发布

汉武大帝·

最新推荐文章于 2024-01-07 07:59:44 发布

阅读量901

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yinge0508/article/details/123130156

版权

three.js 专栏收录该内容

112 篇文章 11 订阅

订阅专栏

先看效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵模型创建树林草地</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景
    var scene = new THREE.Scene();
    // 2,创建模型
    // 创建平面模型---草地-- start
    var plane_geometry = new THREE.PlaneGeometry(5000,5000); // 创建平面模型
    plane_geometry.rotateX(Math.PI/2); // 设置平面模型绕 X 轴旋转90度
    var plane_texture = new THREE.TextureLoader().load('./caodi.png'); // 加载草地图片
    // wrapS 这个值定义了纹理贴图在水平方向上将如何包裹
    plane_texture.wrapS = THREE.RepeatWrapping;
    // wrapT 这个值定义了纹理贴图在垂直方向上将如何包裹
    plane_texture.wrapT = THREE.RepeatWrapping;
    plane_texture.repeat.set(20,20); // 纹理在表面上重复多少次，在每个方向 U 和 V
    var plane_material = new THREE.MeshBasicMaterial({
      map:plane_texture, // 设置纹理
      side:THREE.DoubleSide // 设置两面可见
    });
    var mesh = new THREE.Mesh(plane_geometry,plane_material);
    scene.add(mesh);
    var group = new THREE.Group(); // 创建组对象
    // 创建平面模型---草地-- end
    // 创建树林
    var tree_texture = new THREE.TextureLoader().load('./tree.png'); // 普通纹理贴图加载器加载树的图片
    // 通过for循环创建100个精灵模型
    for(var i = 0; i < 100; i ++){
      // 创建精灵材质
      var tree_material = new THREE.SpriteMaterial({map:tree_texture});
      var tree_sprite = new THREE.Sprite(tree_material); // 创建精灵模型
      tree_sprite.scale.set(50,50,1); // 设置精灵模型缩放，只设置x,y方向大于 1
      tree_sprite.position.set(Math.random()*500,25,Math.random()*500); // 设置精灵模型的位置
      group.add(tree_sprite); // 组对象中添加精灵模型
    }
    var group2 = group.clone();
    group2.translateX(-500);
    var group3 = group.clone();
    group3.translateZ(-500);
    var group4 = group.clone();
    group4.translateX(-500);
    group4.translateZ(-500);

    scene.add(group, group2, group3, group4);
    // 创建树林--end
    // 3，创建光源对象
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);
    var point = new THREE.PointLight(0xffffff);
    point.position.set(500,500,500);
    scene.add(point);
    // 4,创建透视相机
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var camera = new THREE.PerspectiveCamera(60,k,0.1,5000);
    camera.position.set(500,150,500);
    camera.lookAt(scene.position);
    // 5,创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
      requestAnimationFrame(render);
    }
    var axes = new THREE.AxesHelper(500);
    // scene.add(axes);
    var controls = new THREE.OrbitControls(camera,renderer.domElement);

    render();

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

汉武大帝·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js 精灵模型Sprite模拟树林效果

先看效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫