three.js添加3d模型
three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。
导入依赖
点击查看代码
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; //鼠标控制器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; //模型加载器
虽然名字为GLTFLoader,但实际上glb文件也是能加载的。
初始化场景
点击查看代码
this.scene = new THREE.Scene(); //新建场景
let width = window.innerWidth; //窗口宽度
let height = window.innerHeight; //窗口高度
let k = width / height; //窗口宽高比
this.camera = new THREE.PerspectiveCamera(60, k, 0.1, 1000); //透视相机
this.camera.position.set(0, 0, 10); //设置相机位置
//创建渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true, //抗锯齿
alpha: true,
});
this.renderer.setSize(width, height); //设置渲染区域尺寸
document
.getElementById("container")
.appendChild(this.renderer.domElement); //将画布添加到container中
其中需要注意的是调节相机参数与相机位置，否则很有可能导致场景中看不见任何东西。
创建背景
这里创建背景有3种办法，各有优劣。
1、直接加载一张贴图作为场景的background。优点：十分简单易于使用。缺点：始终是一张平行与屏幕的平面，无法随鼠标移动拖拽而变换。
点击查看代码
//创建宇宙背景
createUniverse() {
let texture = new THREE.TextureLoader().load(BgImg); //加载背景贴图
this.scene.background = texture; //设置场景背景
},
2、使用天空盒子，加载CubeTextureLoader纹理，再将该纹理设为场景的background。优点：可随鼠标移动拖拽而变换。缺点：需要特制的六张天空盒子贴图，贴图不吻合时，立方体空间边缘会出现明显割裂感，视角两侧贴图会被拉伸。
点击查看代码
import right from "@/assets/img/space1/right.jpg";
import left from "@/assets/img/space1/left.jpg";
import top from "@/assets/img/space1/top.jpg";
import bottom from "@/assets/img/space1/bottom.jpg";
import front from "@/assets/img/space1/front.jpg";
import back from "@/assets/img/space1/back.jpg";
//创建天空盒子
createSkyBox() {
//加载天空盒子纹理
let cubeTexture = new THREE.CubeTextureLoader().load([
right,
left,
top,
bottom,
front,
back,
]);
this.scene.background = cubeTexture; //设置场景背景
},
3、创建一个较大的球体，将场景内的物体全部放入球体内部，此思路也是全景图原理，在vr看房项目中大多能遇见。优点：可随鼠标移动拖拽而变换，由于球心距球壳距离相等，不会出现视角两侧贴图拉伸。缺点：需要调节球体半径到合适的尺度，保证空间相机在球体内部，否则空间会出现黑块。需要保证贴图为360全景图。否则球壳拼接边缘会出现明显空间割裂。
点击查看代码
//创建全景背景
createPanoramicBj() {
let geometry = new THREE.SphereGeometry(10000, 100, 100); //几何体
let material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load(panoramicImg), //导入图片纹理
color: 0xffffff,
//材质背面显示
side: THREE.BackSide,
});
let mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
},
其中必须使用side: THREE.BackSide,显示材质背面。
3种办法视情况选择，当然也可能有其他我不知道办法。本文使用为创建球体的办法。
创建鼠标控制器
点击查看代码
//创建轨道控制
createOrbitControls() {
//没有缩放阻尼
this.mouseControls = new OrbitControls(
this.camera,
this.renderer.domElement
); //创建控件对象
this.mouseControls.enablePan = true; //右键平移拖拽
this.mouseControls.enableZoom = true; //鼠标缩放
this.mouseControls.minDistance = 0; //相机距离原点的距离范围
this.mouseControls.maxDistance = 100;
this.mouseControls.enableDamping = true; //滑动阻尼
this.mouseControls.dampingFactor = 0.1; //(默认.25)
this.mouseControls.maxPolarAngle = (Math.PI / 4) * 3; //y旋转角度范围
this.mouseControls.minPolarAngle = Math.PI / 4;
// this.mouseControls.autoRotate = true; //自转(相机)
// this.mouseControls.autoRotateSpeed = 5; //自转速度
},
相机的最大与最小距离需要注意调节，否则会出现缩放异常。
创建光源
点击查看代码
//创建光源
createLight() {
this.ambientLight = new THREE.AmbientLight(0x6aceff); //设置环境光
this.scene.add(this.ambientLight); //将环境光添加到场景中
this.pointLight = new THREE.PointLight(0xffffff, 1, 0);
this.pointLight.position.set(10, 10, 0); //设置点光源位置
this.scene.add(this.pointLight); //将点光源添加至场景
},
模型最终显示出来的颜色与环境光和点光源均有关。同时也需要注意调节点光源位置。
加载模型
点击查看代码
//加载模型
loadModel() {
let loader = new GLTFLoader();
//此路径是相当对于public中index.html的，模型必须放在public路径下
loader.load("model/bdd.glb", (gltf) => {
console.log(gltf);
gltf.scene.position.set(0, 0, 0);
this.scene.add(gltf.scene);
});
},
需要注意的是这里加载的模型是必须放在public路径下的，否则会无法加载。注意根据模型尺寸，调节场景的各种参数，否则会无法看见模型。
渲染场景
点击查看代码
//重复渲染
repeatRender() {
//请求动画帧，屏幕每刷新一次调用一次，绑定屏幕刷新频率
requestAnimationFrame(this.repeatRender);
this.mouseControls.update(); //实时更新轨道控制
// this.cube.rotation.y += 0.01; //以y为轴心的旋转角度每帧自加0.01
this.renderer.render(this.scene, this.camera); //将场景和相机进行渲染
},
渲染场景时不要忘记实时update鼠标控制器。
完成
加载一个冰墩墩。
加载一朵玫瑰(win10自带的3D Viewer里面导出的，本文使用的模型全是glb文件。如果是gltf整体文件也可直接导入three，但如果贴图与模型是分开的松散gltf文件可以使用3D Viewer直接另存为glb文件即可导入three)。
加载一个凯瑟琳(在这里下载的，注册用户后里面有大量免费模型可使用）
加载一个剑刃星舰(也是sketchfab里面下载的)。
浏览地址（第一次浏览会缓存模型文件，加载较长时间）：http://xisite.top/original/webGL/8/index.html
源码地址：https://gitee.com/xi1213/three-load-model
