【ThreeJs】06 - 纹理

项目搭建小提示

1. 创建vue项目

vue create xxx

2. 安装ThreeJs

npm i three --save

3. 导入ThreeJs到组件中可以使用全部到如之后使用 自定义名称. 的方式引用或者是进行按需引入:

import * as THREE from 'three'

import {
        AxesHelper,
        ConeGeometry,
        DirectionalLight,
        DoubleSide,
        HemisphereLight,
        Mesh,
        MeshNormalMaterial,
        MeshPhongMaterial,
        MirroredRepeatWrapping,
        PerspectiveCamera,
        PlaneGeometry,
        RepeatWrapping,
        Scene,
        TextureLoader,
        WebGLRenderer
    } from "three";

4. 注意注意注意！！！ 一定要注意的是在引用assets中的图片的使用需要使用 require(路径)进行引用；

纹理 （贴图）

1. texture 纹理，使用纹理加载器 textureLoader。

1. 加载器 textureLoader

let textureLoad = new TextureLoader();

textureLoader.load('资源的路径url')

2. 实现简单的纹理效果

2.1 常用属性

1. repeat:设置纹理的平铺次数；第一个参数是x轴的平铺次数、第二个参数是y轴的平铺次数；

let textureLoad = new TextureLoader();
// 设置纹理
this.planTextureLoader = textureLoader.load(require('../../assets/girl.jpg'))

// 设置纹理的平铺次数 x轴3次 轴 2次
this.planTextureLoader.repeat.set(3, 2)

2. 分别设置x、y轴的平铺方式通过 wrapS 、wrapT：

this.planTextureLoader.wrapS = MirroredRepeatWrapping // 相当于x轴的平铺方式为镜像平铺
this.planTextureLoader.wrapT = RepeatWrapping // 相当于y轴的平铺方式

3. 设置纹理的偏移:

// 让纹理动起来累加 offset属性的值
this.planTextureLoader.offset.x += 0.01

4. 纹理坐标:

填图是需要纹理坐标的，系统提供的几何体都是有纹理坐标的
建模模型导出的话也可以导入纹理坐标 在模型中有

2.2 实现纹理偏移让纹理动起来

纹理偏移让纹理动起来

<script>
    import {
        AxesHelper,
        ConeGeometry,
        DirectionalLight,
        DoubleSide,
        HemisphereLight,
        Mesh,
        MeshNormalMaterial,
        MeshPhongMaterial,
        MirroredRepeatWrapping,
        PerspectiveCamera,
        PlaneGeometry,
        RepeatWrapping,
        Scene,
        TextureLoader,
        WebGLRenderer
    } from "three";

    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

    export default {
        name: "index",
        data() {
            return {
                // 渲染器
                renderer: null,
                // 相机
                camera: null,
                // 场景
                scene: null,
                // 灯光
                light: null,
        // 长方形的纹理加载器
                planTextureLoader:null
            }
        },
        methods: {
            init() {

                // 1. 创建一个渲染器
                this.renderer = new WebGLRenderer({antialias: true})
                // 设置渲染器的大小
                this.renderer.setSize(window.innerWidth, window.innerHeight)
                // 设置渲染器的清空颜色
                this.renderer.setClearColor(0xffffff)
                // 将渲染器的canvas挂载到DOM上
                document.body.appendChild(this.renderer.domElement)

                // 2. 创建一个相机
                this.camera = new PerspectiveCamera(80, window.innerWidth / window.innerHeight, window.innerWidth / window.innerHeight, 1000)

                // 监听窗口的改变动态设置渲染器尺寸
                window.addEventListener('resize', () => {
                    // 更新渲染器尺寸
                    this.renderer.setSize(window.innerWidth, window.innerHeight)
                    // 更新相机的宽高比
                    this.camera.aspect = window.innerWidth / window.innerHeight
                    // 更新相机宽高比之后需要重新更新相机的投影矩阵
                    this.camera.updateProjectionMatrix()
                })

                // 设置相机的位置
                this.camera.position.set(0, 0, 100)

                // 创建一个场景
                this.scene = new Scene()

                // 创建一个灯光
                this.light = new HemisphereLight(0xeeeeee, 0xff9900)
                // this.light = new DirectionalLight(0xeeeeee , 0xff9900)

                // 将灯光添加到场景中
                this.scene.add(this.light)

                // 创建辅助线
                let auxLine = new AxesHelper(10000)
                // this.scene.add(auxLine)

                // 创建一个纹理加载器
                let textureLoader = new TextureLoader()

                // 创建形状 一个圆锥
                let coneGeometry = new ConeGeometry(30, 35, 8)
                // 创建一个材质
                let coneMaterial = new MeshPhongMaterial({
                    map: textureLoader.load(require('../../assets/girl.jpg'))
                })
                // 根据形状和材质创建一个模型
                let coneMesh = new Mesh(coneGeometry, coneMaterial)

                // 将模型添加到场景中
                this.scene.add(coneMesh)

                /** 设置纹理开始 **/
                    // 设置纹理
                this.planTextureLoader = textureLoader.load(require('../../assets/girl.jpg'))

                // 设置纹理的平铺次数 x轴3次 轴 2次
                this.planTextureLoader.repeat.set(3, 2)
                this.planTextureLoader.wrapS = MirroredRepeatWrapping // 相当于x轴的平铺方式为镜像平铺
                this.planTextureLoader.wrapT = RepeatWrapping // 相当于y轴的平铺方式

        /**
         * 纹理坐标 :
         *    填图是需要纹理坐标的，我们系统提供的几何体都是有纹理坐标的
         *    建模模型导出的话也可以导入纹理坐标 在模型中有
         * */

        // 让纹理动起来累加 offset属性的值
        this.planTextureLoader.offset.x += 0.01

                /** 设置纹理结束 */

                    // 创建一个平面
                let planGeometry = new PlaneGeometry(30, 10)
                // 创建材质
                let planMaterial = new MeshPhongMaterial({
                    // 设置为双面显示
                    side: DoubleSide,
                    map: this.planTextureLoader
                })
                // 根据形状和材质创建一个新模型
                let planMesh = new Mesh(planGeometry, planMaterial)
                planMesh.position.z = 50
                this.scene.add(planMesh)

                // 使用渲染器渲染场景和相机
                this.renderer.render(this.scene, this.camera)
                // 创建一个控制器
                new OrbitControls(this.camera, this.renderer.domElement)
                this.update()
            },
            update() {
                this.renderer.render(this.scene, this.camera)
        this.planTextureLoader.offset.x += 0.001
                requestAnimationFrame(this.update)
            }
        },
        created() {
            this.init()
        }
    }
</script>