Vue与Three.js结合

Posted 2021-04-16 webgis学习

 Three.js 是一款运行在浏览器中的 3D 引擎，本文介绍Vue如何与Three.js结合。

运行本实例的前提是安装好Three.js引擎，具体方法是在cmd中输入命令 npm   install   three  -- save，等待自动下载安装即可。

直接上代码

<template> <div> <div id="threeContainer"></div> </div></template>
<script>import * as THREE from "three";
export default { name: "ThreeTest", data() { return { camera: null, scene: null, renderer: null  }; }, methods: { init() { this.scene = new THREE.Scene(); let container = document.getElementById("threeContainer"); this.camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight, 0.01, 1000 );
 this.camera.position.z = 10; var p1 = new THREE.Vector3(0, 0, 0);
 let geometry = new THREE.Geometry(); //声明一个几何体对象Geometry //绑定顶点到几何体 geometry.vertices.push(p1);
 geometry.colors = [new THREE.Color(0xff0000)]; //如果以点的形式渲染，需要设置点对应材质 let pointMaterial = new THREE.PointsMaterial({ color: 0xffffff, //设置颜色，默认 0xFFFFFF vertexColors: true, //定义材料是否使用顶点颜色，默认false ---如果该选项设置为true，则color属性失效 size: 1.0 //定义粒子的大小。默认为1.0 }); //生成点模型 var points = new THREE.Points(geometry, pointMaterial); //将模型添加到场景 this.scene.add(points);
 this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(container.clientWidth, container.clientHeight);
 this.renderer.render(this.scene, this.camera); container.appendChild(this.renderer.domElement); } }, mounted() { this.init(); }};</script><style scoped>#threeContainer { width: 500px; height: 500px;}</style>

8行引入three组件，并命名为 Three；

14-16行 定义camera、scene、render；

23-30行设置相机为透视投影；z方向可视范围是0.01--1000，相机的z为10；

31-43行 设置点的位置及材质；

45行 生成点模型；

47行将模型添加到场景中；

49-52行渲染场景；

代码运行结果