最近因?yàn)閠hree.js的項(xiàng)目要用Vue.js 來重構(gòu)，所以不太清楚在Vue里面怎么引入。找了很多方法都是一直報(bào)錯(cuò)，最后在Stack Overflow找到了。

首先是下載包，直接用?npm install three --save 就行了。

然后就是在component里面引入。

<template><div><div id="container"></div></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>#container {height: 400px;} </style>

?

總結(jié)

以上是生活随笔為你收集整理的Vue里引入three.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。