使用vue学习three.js之加载和使用纹理-使用环境贴图创建虚假的反光效果,使用CubeTextureLoader创建全景贴图,使用envMap创建静态环境贴图

使用环境贴图创建虚假的反光效果

  • 1.demo效果
  • 2. 实现要点
    • 2.1 创建场景的全景贴图
    • 2.2 创建场景中的模型
    • 2.3 属性更新处理
    • 2.4 模型旋转更新
  • 3. demo代码

1.demo效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2. 实现要点

2.1 创建场景的全景贴图

在创建场景函数中,使用 CubeTextureLoader 创建全景贴图,然后将全景贴图赋值给场景的 background 属性

// 创建场景
createScene() {
  this.scene = new THREE.Scene()
  const publicPath = process.env.BASE_URL
  //创建全景贴图设置为场景背景
  this.scene.background = new THREE.CubeTextureLoader()
    .setPath(`${publicPath}textures/cubemap/parliament/`)
    .load([
      'posx.jpg',
      'negx.jpg',
      'posy.jpg',
      'negy.jpg',
      'posz.jpg',
      'negz.jpg'
    ])
}

2.2 创建场景中的模型

模型包括一个立方体和一个球体,要注意一下几点

  • 创建材质
    创建好材质后把材质的环境贴图 (material.envMap属性) 设置为场景的背景,即上一步创建好的全景贴图
  • 创建方块
    只需要使用BoxGeometry创建一个立方体模型,然后和上面创建的材质共同创建Mesh对象即可
  • 创建球体
    使用SphereGeometry创建一个球体模型,这里需要 clone一下材质 ,然后使用克隆的材质和球体模型创建Mesh对象
// 创建模型
createModels() {
  const material = new THREE.MeshPhongMaterial()
  material.envMap = this.scene.background //场景背景设置为材质的环境贴图

  //创建方块
  const boxGeometry = new THREE.BoxGeometry(10, 15, 15)
  this.cube = new THREE.Mesh(boxGeometry, material)

  this.cube.rotation.y = 0.5
  this.cube.position.x = -12
  this.cube.position.y = 5
  this.scene.add(this.cube)

  //创建球体
  const sphereGeometry = new THREE.SphereGeometry(10, 15, 15)
  this.sphere = new THREE.Mesh(sphereGeometry, material.clone()) //材质需要克隆一份,否则方块材质改变球体也会跟着发生改变
  this.sphere.rotation.y = -0.5
  this.sphere.position.x = 12
  this.sphere.position.y = 5

  this.scene.add(this.sphere)
}

2.3 属性更新处理

为满足demo可以为方块选择不同的纹理贴图和对方块和球体调整反射光折射率,这里需要做一些处理

  • 方块纹理处理
    如果选择的纹理贴图不是none则加载对应的map贴图和normal贴图,赋值到方块材质的map属性和normalMap属性上,同时设置方块材质的normalScale属性,用来调整法线贴图的凹凸深度,如果没有为方块选择纹理贴图,将方块的材质重置为envMap是场景背景的材质
  • 反射光折射率处理
    方块和球体都需要处理,将球体和方块各自的材质中的material.reflectivity属性设置为页面中设置的值即可
  • 材质更新
    由于调整过参数后模型的材质会发生改变,所以需要显示的告诉计算机重新编译材质,将它们材质的material.needsUpdate 属性设置为true

2.4 模型旋转更新

demo中勾选了rotate后,方块可以立方体可以旋转,在这里需要支持一下

//模型旋转更新
updateRotation() {
  if (this.properties.rotate) {
    this.cube.rotation.x += 0.01
    this.cube.rotation.y += 0.01
    this.sphere.rotation.y -= 0.01
  }
}

3. demo代码

<template>
  <div>
    <div id="container" />
    <div class="controls-box">
      <section>
        <el-row>
          <el-checkbox v-model="properties.rotate">
            rotate
          </el-checkbox>
        </el-row>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col :span="8">
                <span class="vertice-span">{{ item.name }}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip" @change="propertiesChange" />
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{ item.value }}</span>
              </el-col>
            </div>
          </div>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col">
            <label>texture</label>
          </el-col>
          <el-col :span="16">
            <el-select v-model="properties.textureType" placeholder="请选择" @change="propertiesChange">
              <el-option v-for="item in texturesOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-col>
        </el-row>
      </section>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
  data() {
    return {
      texturesOptions: [
        {
          value: 'bathroom',
          label: 'bathroom'
        },
        {
          value: 'plaster',
          label: 'plaster'
        },
        {
          value: 'metal-floor',
          label: 'metal-floor'
        },
        {
          value: 'none',
          label: 'none'
        }
      ],
      properties: {
        normalScale: {
          name: 'normalScale',
          value: 1,
          min: -2,
          max: 2,
          step: 0.1
        },
        reflectivity: {
          name: 'reflectivity',
          value: 1,
          min: 0,
          max: 2,
          step: 0.1
        },
        textureType: 'none',
        rotate: false
      },
      cube: null,
      sphere: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      sphereLightMesh: null,
      pointLight: null,

      invert: 1,
      phase: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    formatTooltip(val) {
      return val
    },

    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createCamera() // 创建相机
      this.createLight() // 创建光源
      this.createModels() // 创建模型
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象

      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
      const publicPath = process.env.BASE_URL
      //创建全景贴图设置为场景背景
      this.scene.background = new THREE.CubeTextureLoader()
        .setPath(`${publicPath}textures/cubemap/parliament/`)
        .load([
          'posx.jpg',
          'negx.jpg',
          'posy.jpg',
          'negy.jpg',
          'posz.jpg',
          'negz.jpg'
        ])
    },
    // 创建模型
    createModels() {
      const material = new THREE.MeshPhongMaterial()
      material.envMap = this.scene.background //场景背景设置为材质的环境贴图

      //创建方块
      const boxGeometry = new THREE.BoxGeometry(10, 15, 15)
      this.cube = new THREE.Mesh(boxGeometry, material)

      this.cube.rotation.y = 0.5
      this.cube.position.x = -12
      this.cube.position.y = 5
      this.scene.add(this.cube)

      //创建球体
      const sphereGeometry = new THREE.SphereGeometry(10, 15, 15)
      this.sphere = new THREE.Mesh(sphereGeometry, material.clone()) //材质需要克隆一份,否则方块材质改变球体也会跟着发生改变
      this.sphere.rotation.y = -0.5
      this.sphere.position.x = 12
      this.sphere.position.y = 5

      this.scene.add(this.sphere)
    },

    // 创建光源
    createLight() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(0, 30, 30)
      spotLight.intensity = 2.2
      this.scene.add(spotLight)

      // 点光源
      const pointColor = '#ff5808'

      this.pointLight = new THREE.PointLight(pointColor)
      this.pointLight.intensity = 4.5

      this.scene.add(this.pointLight)
      this.createSmallSphereLight()
    },
    // 创建球形光源
    createSmallSphereLight() {
      const sphereLight = new THREE.SphereGeometry(0.2)
      const sphereLightMaterial = new THREE.MeshBasicMaterial({
        color: 0xac6c25
      })
      this.sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial)
      this.sphereLightMesh.castShadow = true

      // this.sphereLightMesh.position = new THREE.Vector3(3, 3, 3)
      this.scene.add(this.sphereLightMesh)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
      this.camera.position.set(0, 12, 68) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      // this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0xeeeeee, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    propertiesChange() {
      const publicPath = process.env.BASE_URL
      //如果不为none为方块加载纹理贴图
      if (this.properties.textureType !== 'none') {
        const texture = new THREE.TextureLoader().load(
          `${publicPath}textures/general/` +
            this.properties.textureType +
            '.jpg'
        )
        this.cube.material.map = texture
        const normal = new THREE.TextureLoader().load(
          `${publicPath}textures/general/` +
            this.properties.textureType +
            '-normal.jpg'
        )
        this.cube.material.normalMap = normal
        // 更新法线缩放
        this.cube.material.normalScale.set(
          this.properties.normalScale.value,
          this.properties.normalScale.value
        ) // normalScale(x,y)
      } else {
        this.cube.material = new THREE.MeshPhongMaterial({
          envMap: this.scene.background
        })
      }

      //更新模型的材质折射率
      this.cube.material.reflectivity = this.properties.reflectivity.value
      this.sphere.material.reflectivity = this.properties.reflectivity.value

      //更新材质中的纹理
      this.cube.material.needsUpdate = true
      this.sphere.material.needsUpdate = true
    },

    //模型旋转更新
    updateRotation() {
      if (this.properties.rotate) {
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
        this.sphere.rotation.y -= 0.01
      }
    },
    //球形光运动
    smallShpereLightAnimation() {
      if (this.phase > 2 * Math.PI) {
        this.invert = this.invert * -1
        this.phase -= 2 * Math.PI
      } else {
        this.phase += 0.03
      }

      this.sphereLightMesh.position.z = +(21 * Math.sin(this.phase))
      this.sphereLightMesh.position.x = -14 + 14 * Math.cos(this.phase)

      if (this.invert < 0) {
        const pivot = 0
        this.sphereLightMesh.position.x =
          this.invert * (this.sphereLightMesh.position.x - pivot) + pivot
      }

      this.pointLight.position.copy(this.sphereLightMesh.position) // 把小球光源的坐标复制给点光源
    },

    render() {
      requestAnimationFrame(this.render)
      this.smallShpereLightAnimation() //球形光位置更新
      this.updateRotation() //模型旋转更新
      this.renderer.render(this.scene, this.camera)
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.label-col {
  padding: 8px 5px;
}

.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…