vue使用THREE.js创建一个可以控制的球体
安装THREE依赖 npm install three --save
如果在main.js中导入THREE报错,可以在index.html中引入静态文件<script src="static/three.js"></script>
在THREE中可以使用控制器来控制物体旋转,拖动,放大等事件,也可以通过手动注册事件来实现控制,
import TrackballControls from 'three/examples/js/controls/TrackballControls'(轨迹控制:可以绕X,Y,Z轴旋转,noPan,noZoom可以控制是否有右键拖放,和放大)
import Orbitcontrols from 'three/examples/js/controls/Orbitcontrols'(轨道控制对于物体的Z轴旋转有限制,enableZoom,enablePan可以控制是否有右键拖放,和放大)
本例使用CSS3DRenderer来手动绘制一个四面的正方体
<template>
<div class="page">
<!-- 123 -->
<div id="container"></div>
<!-- <div id="blocker"></div> -->
</div>
</template>
<script type="text/ecmascript-6">
import TrackballControls from 'three/examples/js/controls/TrackballControls'
// import Orbitcontrols from 'three/examples/js/controls/Orbitcontrols'
import CSS3DObject from 'three/examples/js/renderers/CSS3DRenderer'
import { Vector3 } from 'Three';
// import dat from 'dat.gui'
export default {
data() {
return {
camera:null,
scene:null,
renderer:null,
controls:null,
group:null,
cube:null,
MouseLastSe