Three.js 给模型添加纹理（Texture）

Javartre

已于 2025-05-09 13:07:56 修改

阅读量413

点赞数 5

文章标签： javascript 开发语言 ecmascript

于 2024-11-29 09:30:00 首次发布

本文链接：https://blog.csdn.net/Javartre/article/details/144116931

版权

TextureLoader

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );

const material = new THREE.MeshBasicMaterial({
    map: texture,//map表示材质的颜色贴图属性
    side:THREE.DoubleSide,
});

Texture 实际应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBJLoader</title>
</head>
<!--  CDN引用 -->
<script type="importmap">
        {
          "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@v0.170/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.170/examples/jsm/"
          }
        }
      </script>

<script type="module">

    import * as THREE from 'three';
    import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.x = 400;
    camera.rotateX = new THREE.Euler(Math.PI, 0, 0);
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.setClearAlpha(0);

    // 创建控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.noPan = true;
    controls.staticMoving = true;
    //  焦距  距离越大图片越小
    controls.minDistance = 10;
    controls.maxDistance = 200;
    // 缩放速度
    controls.zoomSpeed = 2.5;
    controls.panSpeed = .5;
    // 旋转速度
    controls.rotateSpeed = 3;
    controls.dynamicDampingFactor = .1;
    // 创建光源
    const light = new THREE.AmbientLight(16777215, 1);
    scene.add(light);
    // light-平行光
    const directionalLight = new THREE.DirectionalLight(16777215, 0.7);
    camera.add(directionalLight);

    // 创建纹理加载器 加载纹理贴图
    const textureLoader = new THREE.TextureLoader();
    const MaPtexture = textureLoader.load('https://xxxx');

    // 创建OBJ文件加载器
    const loader = new OBJLoader();
    loader.load('https://xxx', function (object) {
        // 遍历模型中的每个子对象
        object.traverse(function (child) {
            // 如果子对象是网格对象，则设置其材质的纹理贴图
            if (child.isMesh) {
                child.material.map = MaPtexture;
            }
        });
        scene.add(object);
    })

    // 渲染场景
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();
</script>

<body>





</body>

</html>