在vue组件中导入和使用three.js库
有没有人能给我解释一下如何在vue组件中正确地导入和使用 three.js库？
经过多次搜索，我发现大多数人使用下面这行代码来导入vue组件中的three.js，但是我认为它已经过时了(对于旧版本的three.js document 或旧版本的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...)我在项目中使用的The complete Vue component file。
回答 6
Stack Overflow用户
发布于 2017-12-17 04:29:44
您可以使用如下的require语句：
const THREE = require('THREE')但是一些插件假定THREE在window上可用，因此您可能想要执行window.THREE = require('THREE')
我没有太多使用import语句的经验，但上面的方法应该可以工作。
Stack Overflow用户
发布于 2018-03-15 17:11:54
对于任何只想尝试基本设置的人来说。这是一个vue组件'ThreeTest‘中的three.js示例。项目设置为vue-cli 'vue init webpack项目名‘，'cd项目名’，'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>Stack Overflow用户
发布于 2019-06-11 06:36:03
由于给定的答案对我不起作用，我将分享对我起作用的初始设置。我在我的示例中使用了Nuxt.js。
如果这个方法有效，应该会出现一个绿色的旋转立方体。
<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>https://stackoverflow.com/questions/47849626
复制相似问题
腾讯云开发者
