WebGL进阶（6）环境贴图与映射贴图

相关文章推荐

火爆的围巾 · 快穿女配NP文H - 百度· 1 月前 ·

乐观的香菜 · 垃圾处理器是不是智商税？余库/海尔/贝克巴斯 ...· 3 月前 ·

踢足球的帽子 · 王者荣耀：EDG.M陷入谷底 ...· 3 月前 ·

爱运动的太阳 · 佩恩_百度百科· 1 年前 ·

灰常酷的伏特加 · 《泰国洞穴救援》百度云网盘下载.BD1080 ...· 1 年前 ·

// 设置cub加载管理器 const cubeTextureLoader = new THREE.CubeTextureLoader() const envMapTexture = cubeTextureLoader.load([ require("../assets/images/textures/environmentMaps/1/px.jpg"), require("../assets/images/textures/environmentMaps/1/nx.jpg"), require("../assets/images/textures/environmentMaps/1/py.jpg"), require("../assets/images/textures/environmentMaps/1/ny.jpg"), require("../assets/images/textures/environmentMaps/1/pz.jpg"), require("../assets/images/textures/environmentMaps/1/nz.jpg") // 创建一个物体球 const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20) const material = new THREE.MeshStandardMaterial({ // 金属材质 metalness: 0.7, roughness: 0.1, // envMap: envMapTexture const sphere = new THREE.Mesh(sphereGeometry, material); this.scene.add(sphere) // 给场景添加背景 this.scene.background = envMapTexture // 给场景所有的物体添加默认的环境贴图 this.scene.environment = envMapTexture // 灯光 // 环境光 const light = new THREE.AmbientLight(0xffffff, 0.5) this.scene.add(light); //直线光源 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5) directionalLight.position.set(10, 10, 10) this.scene.add(directionalLight)

2. 效果图

3. 全部代码

<template>
  <div class="home">
    <div id="threeContainer" class="threeContainer"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 导入轨道控制器
export default {
  name: 'Home',
  data () {
    return {
      scene: null,  //场景对象
      camera: null,  //相机对象
      cube: null, //物体
      controls: null, // 控制器
      renderer: null  //渲染器对象
  mounted () {
    this.init()
  methods: {
    init () {
      // 1. 创建场景
      this.scene = new THREE.Scene()
      // 2. 创建相机
      this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
      this.camera.position.set( 0, 0, 10 ) // 设置相机位置
      this.scene.add(this.camera)
      // 3. 添加物体 
      // 环境贴图与映射贴图
      // 设置cub加载管理器
      const cubeTextureLoader = new THREE.CubeTextureLoader()
      const envMapTexture = cubeTextureLoader.load([
        require("../assets/images/textures/environmentMaps/1/px.jpg"),
        require("../assets/images/textures/environmentMaps/1/nx.jpg"),
        require("../assets/images/textures/environmentMaps/1/py.jpg"),
        require("../assets/images/textures/environmentMaps/1/ny.jpg"),
        require("../assets/images/textures/environmentMaps/1/pz.jpg"),
        require("../assets/images/textures/environmentMaps/1/nz.jpg")
      // 创建一个物体 球
      const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20)
      const material = new THREE.MeshStandardMaterial({ // 金属材质
        metalness: 0.7,
        roughness: 0.1,
        // envMap: envMapTexture
      const sphere = new THREE.Mesh(sphereGeometry, material);
      this.scene.add(sphere)
      // 给场景添加背景
      this.scene.background = envMapTexture
      // 给场景所有的物体添加默认的环境贴图
      this.scene.environment = envMapTexture
      // 灯光
      // 环境光
      const light = new THREE.AmbientLight(0xffffff, 0.5)
      this.scene.add(light);
      //直线光源
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
      directionalLight.position.set(10, 10, 10)
      this.scene.add(directionalLight)
      // 4. 初始化渲染器
      this.renderer = new THREE.WebGLRenderer()
      // 设置渲染器的尺寸大小
      this.renderer.setSize( window.innerWidth, window.innerHeight )
      // 将webgl渲染的canvas内容添加到body中
      document.getElementById('threeContainer').appendChild( this.renderer.domElement )
      // 创建轨道控制器
      this.controls = new OrbitControls( this.camera, this.renderer.domElement )
      // 设置控制器阻尼，让控制器更真实
      this.controls.enableDamping = true
      // 添加坐标轴辅助器
      const axesHelper = new THREE.AxesHelper( 5 )
      this.scene.add( axesHelper )
      // 渲染函数
      this.render()
      // 监听尺寸变化
      this.resize()
    // 渲染函数
    render () {
      this.controls.update()
      this.renderer.render( this.scene, this.camera )
      // 渲染下一帧的时候就会调用render函数
      requestAnimationFrame( this.render )
    // 监听尺寸变化，更新渲染页面
    resize () {
      window.addEventListener('resize', () => {
        // 更新摄像头
        this.camera.aspect = window.innerWidth / window.innerHeight
        // 更新摄像机的投影矩阵
        this.camera.updateProjectionMatrix()
        // 更新渲染器
        this.renderer.setSize( window.innerWidth, window.innerHeight )
        // 设置渲染器的像素比
        this.renderer.setPixelRatio(window.devicePixelRatio)
</script>