vue中three及其依赖引入和使用
官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]引入单页面应用<script src="../lib/three.js"></script>//ES5,相关依赖相同模块化应用npm 安装npm install three --save...
官方文档和例子[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”);
更多推荐
所有评论(0)