前言
随着计算机技术的飞升，可视化在web端的应用，3D交互已经渐渐走进大家的眼帘..
前端技术革新，往后的需求也会对前端人员的要求越来越高。以前webgl工程师、gis工程师、前端工程师、ui工程师等可能都有着明确的分工。
但现在，一门技术的get，无疑是在企业中的一个亮点。曾经渴望绘制漂亮的canvas，如今想掌握3d技术...这都是进步与发展。如果你想跳过webgl底层
想熟练的在web端运用3D技术，那无疑当前最火的three.js是你最好的选择
当然，当你学到一定程度，返璞归真。了解webgl的底层原理也是一个升华的必经之路。。。
Threejs ？
1：three是什么？
2：三大基础组件：scene(场景),renderer(渲染器),camera(相机)
3：对象，几何，网状几何
4：灯光材质
5：数学库
6：controls
7：数据模型
8：返璞归真....
基础环境搭建
1. nodejs (官方下载安装即可)
2. Vue 环境搭建（采用vue-cli脚手架）
3. Threejs 文件引入 (本事列采用直接引入的方式，因为threejs 使用npm 的方式引入会存在各种未知的错误，本人也处于入门阶段，避免踩坑)
4. 具备前端基础知识
废话不多说，直接上代码
<template> <div ref="content"></div></template> <script>// 引入threejsimport * as THREE from "../../public/build/three";//鼠标控制import { OrbitControls } from "../../public/example/jsm/controls/OrbitControls.js"; export default { components: {}, data() { return { // 创建一个场景 scene: null, // 创建一个相机 camera: null, // 创建一个渲染器 renderer: null, // 模型对象 mesh: null }; }, mounted() { this.init(); }, methods: { // 初始化 init() { // 初始化容器 var content = this.$refs.content; // 创建一个场景 this.scene = new THREE.Scene(); this.scene.background = new THREE.Color("#000"); // 创建几何体 var geometry = new THREE.BoxBufferGeometry(10, 10, 10); // 几何体材质对象 var material = new THREE.MeshPhongMaterial({ color: "#FFF" }); // 创建网格模型对象 this.mesh = new THREE.Mesh(geometry, material); this.scene.add(this.mesh); // 创建点光源 var point = new THREE.PointLight("#FFF"); point.position.set(40, 20, 30); this.scene.add(point); const sphereSize = 10; const pointLightHelper = new THREE.PointLightHelper(point, sphereSize); this.scene.add(pointLightHelper); //创建环境光 var ambient = new THREE.AmbientLight(0x444444); this.scene.add(ambient); // 创建一个相机 this.camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); this.camera.position.set(-50, 50, 50); this.camera.lookAt(0, 0, 0); //坐标轴辅助器，X,Y,Z长度30 var axes = new THREE.AxesHelper(300); this.scene.add(axes); // 辅助网格 let gridHelper = new THREE.GridHelper(100, 100); this.scene.add(gridHelper); // 创建渲染器 this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0xb9d3ff, 1); //插入 dom 元素 content.appendChild(this.renderer.domElement); let controls = new OrbitControls(this.camera, this.renderer.domElement); controls.addEventListener("resize", this.render(), false); }, render() { this.renderer.render(this.scene, this.camera); // 自动旋转动画 this.mesh.rotateY(0.01); requestAnimationFrame(this.render); } }};</script> <style lang="scss" scoped></style>
Threejs 采用的是右手坐标系，什么是右手坐标系 ？ 直接看下图
