当前位置：首页 > article >正文

threejs-基础材质设置

article 2024/10/11 3:00:54

一、介绍

主要内容：基础材质(贴图、高光、透明、环境、光照、环境遮蔽贴图)

主要属性：

side: three.DoubleSide, //设置双面

          color: 0xffffff, //颜色

        map: texture, //纹理

          transparent: true, // 透明度

          aoMap: aoTexture, //ao贴图

          aoMapIntensity: 1, //ao贴图强调

        alphaMap:alphaMap, //透明度贴图

          lightMap:lightMap,//光照贴图

          reflectivity: 1, //设置反射强度

          specularMap: specularMap //设置高光贴图

二、展示

1、效果

2、代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入GUI
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBEloader.js'

// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(
  45, //视角 值越多视野越大
  window.innerWidth / window.innerHeight, //宽高比
  0.1, //近平面(相机最近能看到的物体)
  1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

//创建纹理加载器
const textureLoader = new three.TextureLoader()
// 加载纹理
let texture = textureLoader.load('./textureImage/southeast.jpg')
//设置颜色空间
texture.colorSpace = three.SRGBColorSpace
//设置线性空间(默认值)
// texture.colorSpace = three.LinearSRGBColorSpace
// 加载ao贴图(环境遮挡贴图)
let aoTexture = textureLoader.load('./textureImage/southeastAO.jpg')
// 加载透明度贴图
let alphaMap = textureLoader.load('./textureImage/tmd.png')
// 加载光照贴图
let lightMap = textureLoader.load('./textureImage/ysbd.jpg')
// 加载hdr贴图
let hdrLoader = new RGBELoader()
let envMap = hdrLoader.load('./textureImage/pz.hdr', (envMap) => {
  // 设置球形映射
  envMap.mapping = three.EquirectangularReflectionMapping
  // 设置环境贴图
  scene.background = envMap
  // 设置环境贴图
  scene.environment = envMap
  // 设置plane的环境贴图
  material.envMap = envMap
})
// 设置高光贴图
let specularMap = textureLoader.load('./textureImage/southeast.jpg')

// 创建几何体
const geomentry = new three.PlaneGeometry(1, 1)
// 创建材质
const material = new three.MeshBasicMaterial({
  side: three.DoubleSide, //双面
  color: 0xffffff, //颜色
  map: texture, //纹理
  transparent: true, // 透明度
  aoMap: aoTexture, //ao贴图
  aoMapIntensity: 1, //ao贴图强调
  // alphaMap:alphaMap, //透明度贴图
  // lightMap:lightMap,//光照贴图
  reflectivity: 1, //设置反射强度
  specularMap: specularMap //设置高光贴图
})
let gui = new GUI()
gui.add(material, 'aoMapIntensity').min(0).max(1).name('ao贴图强调')
gui
  .add(texture, 'colorSpace', {
    sRGB: three.SRGBColorSpace,
    Linear: three.LinearSRGBColorSpace
  })
  .onChange(() => {
    texture.needsUpdate = true //设置颜色空间的纹理需要进行更新
  })
// 创建网格
const cube = new three.Mesh(geomentry, material)
// 加入场景
scene.add(cube)
// 相机位置
camera.position.z = 5 //设置在z轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate) //每一帧调用函数
  // 旋转
  // cube.rotation.x += 0.01 // X轴转
  // cube.rotation.y += 0.01 // Y轴转
  renderer.render(scene, camera) // 重新渲染
}
animate()

查看全文

http://www.kler.cn/news/342088.html