Threejs - 搭建三维场景

Posted 2021-04-21 前端开发爱好者

前言

随着计算机技术的飞升，可视化在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 采用的是右手坐标系，什么是右手坐标系 ？ 直接看下图

觉得本文对你有帮助？请分享给更多人

关注==>>「前端开发爱好者」，一起提升前端技能！