Three.js--》实现3d水晶小熊模型搭建

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
  <!-- 3D水晶小熊 -->
  <CrystalBear></CrystalBear>
</template>

<script setup>
import CrystalBear from './components/CrystalBear.vue';
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(1.5,1,1.5) // 设置相机位置
camera.aspect = window.innerWidth / window.innerHeight // 更新摄像头宽高比例
camera.updateProjectionMatrix() // 更新相机投影矩阵
scene.add(camera)

初始化渲染器：

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight) // 设置渲染器的大小

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

导入控制器：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 实例化控制器
const controls = new OrbitControls(camera,renderer.domElement)

设置渲染函数：

const render = () =>{ 
  renderer.render(scene,camera) // 渲染场景
  requestAnimationFrame(render) // 循环渲染
}

进行挂载：

// 挂载完成之后获取dom
onMounted(()=>{
  // 添加控制器
  const controls = new OrbitControls(camera,canvasContainer.value)
  controls.enableDamping = true 
  canvasContainer.value.appendChild(renderer.domElement)
  render()
})

ok，写完基础代码之后，接下来开始具体的Demo实操。

加载背景纹理

可以在网上随便找一张全景图片，然后对环境进行纹理贴图。注意：这里需要借助TextureLoader库，其用于将2D纹理图像文件加载到WebGL中，TextureLoader可以加载各种常见的图像文件格式，如JPG、PNG、GIF等。我们可以使用TextureLoader加载纹理图像，然后将它们映射到3D模型表面上，从而创建逼真的3D场景。

const loader = new THREE.TextureLoader()
const bgTexture = loader.load(bgimg)
bgTexture.mapping = THREE.EquirectangularReflectionMapping // 设置有折射效果的全局背景
scene.background = bgTexture
scene.environment = bgTexture

Three.js--》实现3d水晶小熊模型搭建-LMLPHP

加载小熊模型

导入 GLTFLoader 库：用于将glTF格式的3D模型文件加载到WebGL中。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"

const gltfLoader = new GLTFLoader()
gltfLoader.load("src/assets/model/bear.gltf",(gltf)=>{
  const model = gltf.scene.children[0]
  model.material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    envMap: bgTexture,
    refractionRatio: 0.7,
    reflectivity: 0.99,
    opacity: 0.5
  })
  scene.add(model)
})

Three.js--》实现3d水晶小熊模型搭建-LMLPHP

给出环境光光源：

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff,0.85)
scene.add(ambient)

Three.js--》实现3d水晶小熊模型搭建-LMLPHP

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）

<template>
  <div class="canvasContainer" ref="canvasContainer"></div>
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import bgimg from "../assets/imgs/050.jpg"

const canvasContainer = ref(null)

// 初始化场景
const scene = new THREE.Scene()
// 初始化相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(1.5,1,1.5) // 设置相机位置
camera.aspect = window.innerWidth / window.innerHeight // 更新摄像头宽高比例
camera.updateProjectionMatrix() // 更新相机投影矩阵
scene.add(camera)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth,window.innerHeight) // 设置渲染器的大小

// 监听屏幕大小变化
window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

// 定义渲染函数
const render = () =>{ 
  renderer.render(scene,camera) // 渲染场景
  requestAnimationFrame(render) // 循环渲染
}

// 加载背景纹理
const loader = new THREE.TextureLoader()
const bgTexture = loader.load(bgimg)
bgTexture.mapping = THREE.EquirectangularReflectionMapping // 设置有折射效果的全局背景
scene.background = bgTexture
scene.environment = bgTexture

// 加载小熊模型
const gltfLoader = new GLTFLoader()
gltfLoader.load("src/assets/model/bear.gltf",(gltf)=>{
  const model = gltf.scene.children[0]
  model.material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    envMap: bgTexture,
    refractionRatio: 0.7,
    reflectivity: 0.99,
    opacity: 0.5
  })
  scene.add(model)
})

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff,0.85)
scene.add(ambient)

// 挂载完成之后获取dom
onMounted(()=>{
  // 添加控制器
  const controls = new OrbitControls(camera,canvasContainer.value)
  controls.enableDamping = true 
  canvasContainer.value.appendChild(renderer.domElement)
  render()
})

</script>

亦世凡华、