在vue组件中导入并使用three.js库

好戏开始

有人可以解释一下我如何正确地在vue组件中导入和使用three.js库吗?

经过许多次搜索后,很明显,大多数人使用以下行在vue组件中导入three.js,但是我认为它已经过时了(对于较旧的three.js文档在较旧的vue版本中使用过usef )。

import * as THREE from './js/three.js';

不幸的是,这似乎对我不起作用,因为在随后编译vue项目时收到以下警告。(请注意,该项目实际上无法正确编译,浏览时会得到一个空文件)。在此处输入图片说明

我尝试了许多其他常用方法来导入也不起作用的three.js!

我根本不是Vue专家,但是three.js包含以下带有导出功能的代码块,我认为这可能会影响我需要导入该库以避免编译警告的方式。

exports.WebGLRenderTargetCube = WebGLRenderTargetCube;
exports.WebGLRenderTarget = WebGLRenderTarget;
exports.WebGLRenderer = WebGLRenderer;
exports.ShaderLib = ShaderLib;
exports.UniformsLib = UniformsLib;
exports.UniformsUtils = UniformsUtils;
exports.ShaderChunk = ShaderChunk;
exports.FogExp2 = FogExp2;
exports.Fog = Fog;
exports.Scene = Scene;
(and so one...)


我用于项目的完整Vue组件文件

假设实验室

您可以使用如下的require语句:

const THREE = require('THREE')

但是某些插件假定THREE在窗口上可用,因此您可能需要这样做window.THREE = require('THREE')

我对导入语句没有太多的经验,但是上面的方法应该有效。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章