three.js 环境贴图

最新推荐文章于 2025-04-27 14:30:00 发布

汉武大帝·

最新推荐文章于 2025-04-27 14:30:00 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.youkuaiyun.com/yinge0508/article/details/123111426

版权

three.js 同时被 2 个专栏收录

112 篇文章

订阅专栏

three.js

112 篇文章

订阅专栏

效果：

环境贴图中用到了立方体纹理加载器，加载6张图片后（图片要长宽相等），得到一个立方体纹理对象，然后赋值给材质的 envMap 即可；

代码：

<!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,定义模型
    var geometry = new THREE.BoxGeometry(100, 100,100);
    var texture = new THREE.CubeTextureLoader();
    texture.setPath('/纹理贴图/');
    var CubeTexture = texture.load(['right.jpg','left.jpg','top.jpg','bottom.jpg','back.jpg','front.jpg']);
    texture.minFilter = THREE.LinearFilter;
    var material = new THREE.MeshPhongMaterial({
      envMap: CubeTexture
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    // 3,创建光源对象--聚光源
    var spotLight = new THREE.SpotLight(0xAA7355, 0.9);
    spotLight.position.set(300, 200, 200);
    spotLight.angle = Math.PI / 2;
    var spotLight2 = new THREE.AmbientLight(0xffffff);
    // spotLight2.position.set(-300, 200, 200);
    // spotLight2.angle = Math.PI / 2;
    scene.add(spotLight,spotLight2);
    // 4,创建相机
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);
    camera.position.set(200, 300, 200);
    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);
    // controls.addEventListener('change',render);
    render();
  </script>
</body>

</html>