首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在vue组件中导入和使用three.js库

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

Stack Overflow用户
提问于 2017-12-17 04:20:05
回答 6查看 22.9K关注 0票数 11

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

经过多次搜索,我发现大多数人使用下面这行代码来导入vue组件中的three.js,但是我认为它已经过时了(对于旧版本的three.js document 或旧版本的vue中使用的,使用usef)。

代码语言:javascript
复制
import * as THREE from './js/three.js';

不幸的是,这似乎对我不起作用,因为在之后编译我的vue项目时,我得到了以下警告。(请注意,项目实际上没有正确编译,当我浏览到它时,我得到一个空文件)。

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

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

代码语言:javascript
复制
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...)

我在项目中使用的The complete Vue component file

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2017-12-17 04:29:44

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

代码语言:javascript
复制
const THREE = require('THREE')

但是一些插件假定THREE在window上可用,因此您可能想要执行window.THREE = require('THREE')

我没有太多使用import语句的经验,但上面的方法应该可以工作。

票数 4
EN

Stack Overflow用户

发布于 2018-03-15 17:11:54

对于任何只想尝试基本设置的人来说。这是一个vue组件'ThreeTest‘中的three.js示例。项目设置为vue-cli 'vue init webpack项目名‘,'cd项目名’,'npm install three --save‘,并将'HelloWorld’组件替换为这个组件:

代码语言:javascript
复制
<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>
票数 53
EN

Stack Overflow用户

发布于 2019-06-11 06:36:03

由于给定的答案对我不起作用,我将分享对我起作用的初始设置。我在我的示例中使用了Nuxt.js。

如果这个方法有效,应该会出现一个绿色的旋转立方体。

代码语言:javascript
复制
<template>
  <div id="container"></div>
</template>
<script>
import * as THREE from 'three'

export default {
  name: 'ThreeTest',
  data() {
    return {
      cube: null,
      renderer: null,
      scene: null,
      camera: null
    }
  },
  methods: {
    init: function() {
      this.scene = new THREE.Scene()
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )

      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(this.renderer.domElement)

      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
      this.cube = new THREE.Mesh(geometry, material)
      this.scene.add(this.cube)

      this.camera.position.z = 5

      const animate = function() {}
    },
    animate: function() {
      requestAnimationFrame(this.animate)

      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01

      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted() {
    this.init()
    this.animate()
  }
}
</script>
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47849626

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档