使用vue架构构建three.js3d场景—全景视频___#三分有点码#专栏

三分有点码

于 2021-06-26 16:01:56 发布

阅读量988

点赞数 1

分类专栏： three.js 文章标签： vue

本文链接：https://blog.csdn.net/Hu_xiao_ge/article/details/118250594

版权

本文档详细介绍了如何利用vue框架结合three.js库，构建一个3D全景视频的场景。通过vue的组件化思想，使得3D交互体验的开发更加便捷。

摘要由CSDN通过智能技术生成

使用vue架构构建three.js3d场景—全景视频 `三分有点码`。

仅是3d全景视频渲染，更多请访问 https://blog.csdn.net/Hu_xiao_ge

<template>
  <!-- 主场景 -->
  <div ref="container_team"></div>
</template>

<script>
import * as THREE from "three";
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
   
  data() {
   
    return {
   
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      videoNode: null,
      videoTexture: null,
      mesh:null,
      mat:null,
      sphere:null,
      vi:[{
   id:'/res/vido/跳伞.mp4'}],    //全景视频务必放在Public/res下
      viindex:0
    };
  },
  mounted(