Threejs之纹理Texture

最新推荐文章于 2024-09-09 21:14:24 发布

你华还是你华

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量425

点赞数 23

分类专栏： ThreeJS 文章标签：数码相机 threejs webgl 3d 前端

本文链接：https://blog.csdn.net/weixin_44103733/article/details/141958801

版权

ThreeJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文目录

前言
一、Texture的基本概念
- 1.1 定义及作用
- 1.2 常用属性
二、代码及效果
- 2.1 代码
- 2.2 效果

前言

在Three.js中，Texture（纹理）是一项核心功能，创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。它允许开发者将图像、视频或其他数据源映射到3D场景中的物体表面上，从而增强物体的视觉效果和真实感。
构造函数
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace )
更多关于Texture（纹理）文档请点这列

一、Texture的基本概念

1.1 定义及作用

定义：Texture在Three.js中指的是将一张图像（或其他数据源，如视频、数据数组等）映射到3D场景中的物体表面上的过程。通过Texture，可以在物体表面应用各种图像效果，使物体的外观更加逼真和多样化。
作用：Texture用于模拟物体的外观和材质，如木纹、石纹、金属质感等，从而创建出更加生动和真实的3D场景。

1.2 常用属性

needsUpdate：将其设置为true，以便在下次使用纹理时触发一次更新。这对于设置包裹模式尤其重要。

二、代码及效果

2.1 代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 5);
        camera.lookAt(0, 0, 0);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight)
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)


        // 加载纹理
        const img = new Image()
        img.src = "../images/rabbit.png"
        const texture = new THREE.Texture(img)
        img.onload = () => {
            texture.needsUpdate = true
        }

        // 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(
            new THREE.BoxGeometry(1, 1, 1), 
            new THREE.MeshBasicMaterial({ map: texture})
        );
        // 将网格对象放入到我们的场景中
        scene.add(cube);

        // 控制器
        const control = new OrbitControls(camera, renderer.domElement)
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

2.2 效果

请添加图片描述
可以看到已经生效并且改变了物体的纹理。

在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

你华还是你华

关注

23
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
Threejs之纹理Texture

在Three.js中，Texture（纹理）是一项核心功能，创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。它允许开发者将图像、视频或其他数据源映射到3D场景中的物体表面上，从而增强物体的视觉效果和真实感。构造函数更多关于Texture（纹理）文档请点这列Texture在Three.js中指的是将一张图像（或其他数据源，如视频、数据数组等）映射到3D场景中的物体表面上的过程。通过Texture，可以在物体表面应用各种图像效果，使物体的外观更加逼真和多样化。Texture。
复制链接

扫一扫