vue.js+three.js实现简单的3D动画

原创

于 2019-08-09 17:27:50 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何利用vue-cli建立前端项目，并通过npm安装three.js库，然后提供了一个简单的3D动画代码示例，提醒读者需替换静态图片以适配自身需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用vue-cli搭建前端框架，具体我就不写了，可以看看我之前的文章
2.使用npm引入three.js npm install three(建议先安装淘宝镜像)
3.直接上代码吧

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

<script>
  import * as THREE from "three";
  // import OrbitControls from "three/examples/js/controls/OrbitControls"
  // import OrbitControls from 'three-orbit-controls';
  // import OrbitControls from 'three/examples/js/controls/OrbitControls'
  // OrbitControls = require('three-orbit-controls')(THREE);
  // import {CSS2DRenderer, CSS2DObject} from 'three-css2drender';
  // import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader';
  // var THREE = require('three')
  // var OrbitControls = require('three-orbit-controls')(THREE)
  export default {
    // name: '3Dzt',

    data() {
      return {
        scene: '',
        camera: '',
        renderer: '',
        geometry: '',
        container: '',
        material: