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

Question

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

经过多次搜索，我很清楚大多数人使用以下行在 vue 组件中导入 three.js，但我认为它已经过时（用于较旧的 three.js 文档 或 用于较旧的 vue 版本）。

 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 组件文件。

原文由 ItsShowtime 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用这样的 require 语句：

 const THREE = require('THREE')

但是一些插件假设 THREE 在窗口上可用，所以你可能想要做 window.THREE = require('THREE')

我对 import 语句没有太多经验，但上面的应该有用。

原文由 posit labs 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于只想尝试基本设置的任何人。这是 vue 组件“ThreeTest”中的 three.js 示例。使用 vue-cli ‘vue init webpack ProjectName’, ‘cd ProjectName’, ‘npm install three –save’ 设置项目并用这个替换 ‘HelloWorld’ 组件：

 <template>
    <div id="container"></div>
</template>

<script>
import * as Three from 'three'

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        let container = document.getElementById('container');

        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;

        this.scene = new Three.Scene();

        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
        let material = new Three.MeshNormalMaterial();

        this.mesh = new Three.Mesh(geometry, material);
        this.scene.add(this.mesh);

        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);

    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate();
  }
}
</script>

<style scoped>
    //TODO give your container a size.
</style>

原文由 PolygonParrot 发布，翻译遵循 CC BY-SA 4.0 许可协议