three.js 纹理对象Texture阵列、偏移、旋转渲染草地

最新推荐文章于 2024-08-16 14:09:54 发布

汉武大帝·

最新推荐文章于 2024-08-16 14:09:54 发布

阅读量997

点赞数

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

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

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

效果：

贴图：

代码：

<!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>纹理对象Texture阵列、偏移、旋转</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>

<body>
  <script>
    // 1,创建场景
    var scene = new THREE.Scene();
    // 2,创建盒子模型
    var geometry = new THREE.PlaneGeometry(200, 200, 20, 30);
    geometry.rotateX(Math.PI/2);
    // 创建纹理加载器对象加载图片
    var texture = new THREE.TextureLoader().load('./caodi.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(10,10); // 纹理对象阵列
    texture.offset = new THREE.Vector2(0.1,0.2); // 纹理对象偏移，范围是0.0到1.0
    texture.center.set(0.5,0.5); // 设置旋转中心
    texture.rotation = Math.PI / 3; // 纹理对象旋转
    // 创建材质对象
    var material_1 = new THREE.MeshLambertMaterial({
      // color: 0xff11ff,
      side: THREE.DoubleSide,
      map: texture
    });
  
    var mesh = new THREE.Mesh(geometry, material_1);
    scene.add(mesh);
    // 3,创建环境光对象
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);
    // 4,创建正交相机
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 100;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);
    // 添加轴辅助对象
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    // 5,创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    // controls.addEventListener('change', render);
    render();
    </script>
</body>

</html>