vue 페이지 에 three.js 를 도입 하여 3d 애니메이션 장면 조작 을 실현 합 니 다.

vue 에 Three.js 설치
요즘 심심 해서 3D 그래 픽 라 이브 러 리 도 연구 하고 있 습 니 다.three.js 는 JavaScript 가 작성 한 WebGL 제3자 라 이브 러 리 입 니 다.Three.js 는 브 라 우 저 에서 실행 되 는 3D 엔진 으로 카메라,시각,재질 등 관련 속성 을 제어 하여 대량의 3D 애니메이션 장면 을 만 들 수 있 습 니 다.
우 리 는 three.js 관련 플러그 인 을 도입 하기 시작 했다.
1.먼저 타 오 바 오 미 러 를 이용 하여 조작 명령 은:
cnpm install three
2.npm 를 이용 하여 레일 컨트롤 플러그 인 을 설치 합 니 다.
나의 위 챗 공식 번호[전단 기초 튜 토리 얼 은 0 부터]를 주목 하고 위 챗 을 추가 하면 무료 로 문 제 를 풀 수 있 습 니 다."1"이 라 고 대답 하여 프로그래머 기술 토론 군 에 끌 어 들 였 다."애플 릿"에 답장 하고 우수한 애플 릿 소스 코드 300 개+입문 튜 토리 얼 1 세트 를 받 습 니 다."자원 수령"에 답 하고 300 G 전단,자바,위 챗 애플 릿,파 이 썬 등 자원 을 수령 하여 전단 을 함께 배 웁 시다.
npm install three-orbit-controls
3.다음은.obj 와.mtle 파일 을 불 러 오 는 플러그 인 을 설치 합 니 다.
npm i --save three-obj-mtl-loader
4.렌 더러 플러그 인 설치:
npm i --save three-css2drender
5.설치 한 후에 페이지 에 three.js 를 도입 하고 사용 합 니 다.호출 된 페이지 에 도입 한 코드 는 다음 과 같 습 니 다.
import * as Three from ‘three'
주요 플러그 인 이 모두 설치 되 었 습 니 다.다음은 demo 를 실현 하여 three.js 가 성공 적 으로 도입 되 었 는 지 테스트 할 수 있 습 니 다.페이지 테스트 코드 는 다음 과 같 습 니 다:

<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 = 0.6
  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>

관련 변수의 정의 용기 크기 에 대한 정 의 를 주의 하 십시오.다음은 현재 vue 프로젝트 를 실행 하고 브 라 우 저 에서 현재 효 과 를 볼 수 있 습 니 다.

나 오 는 효 과 는 회전 하 는 정사각형 이다.이것 은 현재 프로젝트 가 three.js 를 성공 적 으로 도입 하여 실행 할 수 있 고 나머지 는 장면 을 만 들 고 멋 진 3D 효 과 를 만 들 수 있다 는 것 을 나타 낸다.
보충 지식:vue 중 three 및 그 의존 도입 및 사용
공식 문서 와 예[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]
끌어들이다
단일 페이지 적용
//ES5,관련 의존 도 동일
모듈 화 응용
npm 설치
npm install three --save
저 는 require 에 적 용 됩 니 다.
const THREE=require('three')//또는
import * as THREE from 'three'
정부 의존
각종 컨트롤 러,로 더,렌 더 링 과 관련 된 파일 을 먼저 관련 폴 더 에 넣 으 면 이런 방법 으로 도입 할 수 있다.npm 로 설치 할 수도 있 지만 의존 이 많은 경우 설치 할 필요 가 없습니다.사용 시
import {CSS2DObject,CSS2DRenderer} from '../utils/THREE/CSS2DRenderer.js';
==이 파일 에 var THREE=require(three)를 먼저 도입 해 야 합 니 다.파일 에 three 에 대한 사용 이 있 기 때 문 입 니 다==

혹은

//      jsm/controls/DragControls.js
//       
import {
 EventDispatcher,
 Matrix4,
 Plane,
 Raycaster,
 Vector2,
 Vector3
} from "@/build/three.module.js";

....

//           
export { DragControls };

관련 플러그 인
마찬가지 로 npm install XXX 를 통 해 설치 한 후 엘 프 글꼴 의 three-spritetext 와 같은 굵 은 라인 의 three.meshline,그리고 자주 사용 하 는 dat.gui 플러그 인 을 실현 할 수 있 습 니 다.

import SpriteText from 'three-spritetext';
var MeshLine = require('three.meshline'); //   MeshLine,MeshLineMaterial
//  
var {MeshLine,MeshLineMaterial} = require('three.meshline');

그 외 성능 검사 플러그 인 Stats 는 npm 를 통 해 설치 할 수 없 으 며,먼저 stats.min.js 를 다운로드 할 수 있 습 니 다.
사용:
1.stats.js 로 변경
2.이 파일 은 마지막 으로"object"==typeof module&&(module.exports=Stats)가 있 습 니 다.주석 을 달다
3.마지막 으로 export default Stats 추가
4、import Stats from ‘…/utils/THREE/stats.js';
stats 와 함께 자주 사용 하 는 dat 는 npm 설치 후 사용 해 야 합 니 다.
1、npm install dat.gui
2、var dat = require(“dat.gui”);
이상 의 vue 페이지 에 three.js 를 도입 하여 3d 애니메이션 장면 조작 을 실현 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.