目录
项目搭建
初始化three.js基础代码
设置环境纹理
加载机器人模型
添加光阵
今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。
项目搭建
本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。
因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：
初始化three.js基础代码
three.js开启必须用到的基础代码如下：
导入three库：
import * as THREE from 'three'
初始化场景：
const scene = new THREE.Scene()
初始化相机：
let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0, 1.5, 6);
初始化渲染器：
let 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()
})
设置渲染函数：
// 设置渲染函数
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
进行挂载：
import { onMounted } from "vue";
onMounted(() => {
// 添加控制器
let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
screenDom.value.appendChild(renderer.domElement)
render();
});
设置环境纹理
这里的话通过RGBELoader将HDR(高动态范围)格式的图片数据加载到Three.js中，并将其转换为Cubemap格式的文本形式，以用于创建更高质量、更真实的3D场景和物体。
// 解析 HDR 纹理数据
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
// 创建rgbe加载器
let hdrLoader = new RGBELoader();
hdrLoader.load("src/assets/imgs/sky12.hdr", (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
});
呈现的效果如下：
加载机器人模型
经过前几篇对three.js小demo的训练，相信大家对加载模型可谓是得心应手了吧，无非就四步嘛：
第一步引入加载GLTF模型和压缩模型的第三方库：
// 加载GLTF模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 解压GLTF模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
第二步初始化loader：
// 设置解压缩的加载器
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
第三步就是加载gltf模型：
// 添加机器人模型
gltfLoader.load("src/assets/model/robot.glb", (gltf) => {
scene.add(gltf.scene);
});
第四步就是根据具体情况添加光源：
// 添加直线光
let light1 = new THREE.DirectionalLight(0xffffff, 0.3);
light1.position.set(0, 10, 10);
let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
light1.position.set(0, 10, -10);
let light3 = new THREE.DirectionalLight(0xffffff, 0.8);
light1.position.set(10, 10, 10);
scene.add(light1, light2, light3);
添加光阵
这里使用视频纹理。VideoTexture（视频纹理）是一种用于游戏和其它交互式3D应用程序中的纹理类型。它允许开发人员将视频流或预先录制的视频作为纹理应用于3D模型，从而为用户提供更加逼真的虚拟体验。VideoTexture通常用于创建虚拟电视、显示屏或其他需要显示视频的场景。在使用VideoTexture时，视频将自动循环播放，因此它可以被用作一种实时纹理，来呈现实时生成的影像或流媒体视频。
// 添加光阵
let video = document.createElement("video");
video.src = "src/assets/zp2.mp4";
video.loop = true;
video.muted = true;
video.play();
let videoTexture = new THREE.VideoTexture(video);
const videoGeoPlane = new THREE.PlaneGeometry(8, 4.5);
const videoMaterial = new THREE.MeshBasicMaterial({
map: videoTexture,
transparent: true,
side: THREE.DoubleSide,
alphaMap: videoTexture, // 纹理贴图，它可以用于控制模型表面的透明度。
});
const videoMesh = new THREE.Mesh(videoGeoPlane, videoMaterial);
videoMesh.position.set(0, 0.2, 0);
videoMesh.rotation.set(-Math.PI / 2, 0, 0);
scene.add(videoMesh);
接下来可以进行添加镜面反射：在Three.js中，Reflector是一种可以创建反射效果的对象。它可以模拟出水面或镜面等表面的反射效果，用于增强场景的真实感。Reflector可以创建在平面、球体、圆柱体等几何体上，可以使用Three.js中的Reflector、Refractor、RefractorRTT等类来创建不同类型的反射效果。
// 添加镜面反射
let reflectorGeometry = new THREE.PlaneGeometry(100, 100);
let reflectorPlane = new Reflector(reflectorGeometry, {
textureWidth: window.innerWidth,
textureHeight: window.innerHeight,
color: 0x332222,
});
reflectorPlane.rotation.x = -Math.PI / 2;
scene.add(reflectorPlane);
demo做完，给出本案例的完整代码：（获取素材也可以私信博主）
参考链接
您阅读本篇文章共花了：
发表评论