Threejs 加载3D模型

最新推荐文章于 2024-05-04 23:49:55 发布

qq_39672409

最新推荐文章于 2024-05-04 23:49:55 发布

阅读量1.1k

点赞数

分类专栏： threejs 文章标签：前端

本文链接：https://blog.csdn.net/qq_39672409/article/details/124047535

版权

本文介绍如何利用Threejs库加载和显示3D模型。通过创建场景、相机和渲染器，设置相机位置，加载OBJ与MTL文件，添加坐标轴辅助，配置灯光，最终实现3D模型的动画渲染。

摘要由CSDN通过智能技术生成

#Threejs 加载3D模型
load3D() {
const scene = new THREE.Scene(); // 场景
// fov — 摄像机视锥体垂直视野角度
// aspect — 摄像机视锥体长宽比
// near — 摄像机视锥体近端面
// far — 摄像机视锥体远端面
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000); // 相机
camera.position.set(0, 0, 10);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(‘skyblue’);
const dom = this.$refs.test3D as HTMLBaseElement;
dom.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 坐标系
const axesHelper = new THREE.AxesHelper(1000);
scene.add(axesHelper);
let objLoader = new OBJLoader();
let mtlLoader = new MTLLoader();
mtlLoader.load(‘/3D/ceshi.mtl’, function(materials) {