vue中three及其依赖引入和使用_vue全局引用three-CSDN博客

本文链接：https://blog.csdn.net/qq_41488724/article/details/96424860

本文介绍Three.js的基础引入方法及配置流程，涵盖不同项目环境下的引入方式，包括单页面应用和模块化应用，并列举了一些常用插件及其安装使用方法。

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

官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]

引入

单页面应用

<script src="../lib/three.js"></script>  //ES5，相关依赖相同

模块化应用

npm 安装

npm install three --save

我自己的是适用于require

const THREE=require（'three'）  //或者
import * as THREE from 'three'

官方依赖

各种控制器，加载器，渲染相关先将文件放入相关文件夹都可以通过这种方法引入。也可以使用npm安装，但在依赖多的情况下没必要安装。使用时同官方

import {CSS2DObject,CSS2DRenderer} from '../utils/THREE/CSS2DRenderer.js';

== 需要注意应该先在该文件引入var THREE = require(‘three’); 因为文件中有对three的使用==
在这里插入图片描述或者是

//官方依赖文档jsm/controls/DragControls.js
//引入需要的依赖
import {
	EventDispatcher,
	Matrix4,
	Plane,
	Raycaster,
	Vector2,
	Vector3
} from "@/build/three.module.js";

....

//最后一步始终是暴露出去
export { DragControls };

相关插件

同样通过npm install XXX安装后，如精灵字体的three-spritetext，可以实现粗线条的three.meshline，以及常用的dat.gui插件

import SpriteText from 'three-spritetext';
var MeshLine = require('three.meshline');	//包含了MeshLine,MeshLineMaterial
//或者
var {MeshLine,MeshLineMaterial} = require('three.meshline');

其外性能检测插件Stats,不能通过npm 安装，可以先下载stats.min.js。
使用：
1、修改为stats.js
2、该文件最后有一句"object" === typeof module && (module.exports = Stats);将其注释
3、最后加上export default Stats
4、import Stats from ‘…/utils/THREE/stats.js’;

经常与stats一起使用的dat需要先通过npm安装再使用
1、npm install dat.gui
2、var dat = require(“dat.gui”);