vue使用three.js实现外部加载模型的自动缩放的效果

最新推荐文章于 2025-07-10 10:33:50 发布

菜鸟karroy

最新推荐文章于 2025-07-10 10:33:50 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： three.js学习文章标签： vue使用threejs threejs加载外部模型实现自动缩放

本文链接：https://blog.youkuaiyun.com/qq_39165556/article/details/91471830

本文介绍了如何在Vue项目中使用Three.js加载外部3D模型，并实现模型自动缩放以适应画布尺寸。具体步骤包括新建项目文件结构，初始化Three.js场景，加载GLTFLoader，计算并应用缩放比例，以及在Vue组件中处理路由和渲染。提供了一个完整的代码示例链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述

具体实现的步骤：

1、新建文件

在src中创建views文件夹，在views中创建scale文件夹。在scale中创建components文件夹和index.vue文件，最后在components创建ModelScale.vue文件。

2、BoxSwitch.vue文件中

（1）、加载需要的js文件

 import * as THREE from 'three'
 import * as dat from 'dat.gui'
 import {OrbitControls} from '@/components/loaders/OrbitControls'
 import {GLTFLoader} from '@/components/loaders/GLTFLoader.js'

（2）、文件框架

export default {
 	name:'ModelScale',
    data(){  // Vue实例的数据对象
        return{
           scene:null,
            camera:null,
            renderer:null,  
            cube:null,
            sphere:null,
            step:0,
            stats:null, 
            group:null     
        }
    },
    props:{  // 传递数据
        width:{type:Number}, 
        height:{type:Number},
        modelUrl:{type:String,default:'tree2.glb'}
        },
    methods:{ 定义 init();  loadModel(); 和 animate();}，
    mounted(){ // 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        this.init();
        this.animate(); 
        this.loadModel();  
}

（3）、init()方法

具体实现过程
a、定义一个Scene。
b、定义一个PerspectiveCamera。
c、定义一个WebGLRenderer渲染器。
d、定义一个包含AmbientLight和DirectionalLight的混合光。
e、定义一个OrbitControls。
f、定义坐标轴助手。

    init(){
        this.scene = new THR

最低0.47元/天解锁文章

200万优质内容无限畅学