vue-three.js初步使用点浅解

three.js库

three.js是JavaScript实现webGl-3D的一个第三方库。具体信息不多扯。
官网：https://threejs.org/
中文网：http://www.webgl3d.cn/

vue中使用three.js库

安装

npm install three --save

组件内引入

import * as Three from 'three';

完整代码示例

<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() {
    
    
        let container = document.getElementById('container');
 
        this.camera = new Three.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 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(window.innerWidth, window.innerHeight);
        container.appendChild(this.renderer.domElement); 
    },
    animate() {
    
    
        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>

轨道控制器OrbitControls

轨道控制器可以使得相机围绕目标进行轨道运动。

this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.minDistance = 18; // 相机最近
this.controls.maxDistance = 500; // 相机最远
this.controls.autoRotate = true; // 自动旋转关闭
this.controls.autoRotateSpeed = 0.8; // 阻尼系数
this.controls.target = new THREE.Vector3(0,0,0);
this.controls.enablePan = true;
this.controls.enableRotate = true;
this.controls.enableDamping = true;

animate() {
    
    
  this.requestAnimationId = requestAnimationFrame(this.animate);
  this.controls.update(); 
  this.renderer.render(this.scene, this.camera);
}

设置3D视窗尺寸

let viewWidth = 350;
let viewHeight = 350;

this.camera = new Three.PerspectiveCamera(70, viewWidth/viewHeight, 0.01, 10);

this.renderer.setSize(window.innerWidth,window.innerHeight);

3D场景无动画

只展示无动画则只需在调用体内调用this.renderer.render()，而无需另建animate（）

methods:{
    
    
	init(){
    
    
		...
		this.renderer.render(this.scene,this.camera);
	}
}

3D带动画视觉

methods:{
    
    
	init(){
    
    
		...
	},
	animate() {
    
    
  		this.requestAnimationId = requestAnimationFrame(this.animate);
  		this.controls.update(); 
  		this.renderer.render(this.scene, this.camera);
	}
},
mounted() {
    
    
  this.init();
  this.animate()
}

场景背景

	this.scene = new THREE.Scene();
	this.scene.background = new THREE.Color(0x00ff00);

场景网格辅助线

    let gridHelper = new THREE.GridHelper(400,30,0xcccccc,0xcccccc);
    this.scene.add(gridHelper);

渲染器WebGLRenderer

    this.renderer = new THREE.WebGLRenderer({
    
    antialias:true});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth,window.innerHeight);
    this.renderer.setClearColor(0xcccccc);

	this.renderer.outputEncoding = THREE.sRGBEncoding;
	this.renderer.shadowMap.enabled = true;

	this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影类型

场景模拟方向的箭头

    let dir = new THREE.Vector3(1,2,0);
	dir.normalize();

	let origin = new THREE.Vector3(0,0,0);
	let length = 1;
	let hex = 0xffff00;
	
	let arrowHelper = new THREE.ArrowHelper(dir,origin,length,hex);
	this.scene.add(arrowHelper);

环境光简单示例

	let ambientLight = new THREE.AmbientLight(0x0c0c0c);
	this.scene.add(ambientLight);

点光示例

3D场景中聚光灯本质即是点光

    let spotLight = new THREE.SpotLight(0xffffff);

    spotLight.cashShadow = true; // 设置光源照射物体有阴影

    spotLight.position.set();

设置阴影

    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影类型
    let spotLight = new THREE.SpotLight(0xffffff);

    spotLight.cashShadow = true; // 设置光源有阴影
	
	let cube;
	cube.receiveShadow = true; // 设置物体cube接收阴影

雾化效果

...
    this.scene.fog = new THREE.Fog(0xffffff,0.015,100);

gui操作界面

import {
    
     GUI } from "three/examples/jsm/libs/dat.gui.module";

let gui = new GUI();

简单几何体

let geometry = new THREE.BoxGeometry(1,1,1);
let material = new THREE.MeshBasicMaterial(color:0x00ff00);
let cube = new THREE.Mesh(geometry,material);
this.scene.add(cube);

OBJLoader引入obj文件

let loader = new THREE.OBJLoader();

loader.load(	'models/monster.obj',( object ) => {
    
    
		this.scene.add( object );
	},
	function ( xhr ) {
    
    
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	function ( error ) {
    
    
		console.log( 'An error happened' );
	}
);

glb&gltf文件

var loader = new THREE.GLTFLoader();

THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
loader.setDRACOLoader( new THREE.DRACOLoader() );

THREE.DRACOLoader.getDecoderModule();

loader.load('models/gltf/duck/duck.gltf',( gltf ) => {
    
    
		this.scene.add( gltf.scene );
		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Scene
		gltf.scenes; // Array<THREE.Scene>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object
	},
	function ( xhr ) {
    
    
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	function ( error ) {
    
    
		console.log( 'An error happened' );
	}
);

以上是three.js入门的一点点皮毛。