Threejs - 几行代码带你创建三维地球
需要具备哪些知识 ？
前端开发中的一些基础知识，html，css，javascript
vue 基本用法 (注意： 本实例是基于vue来做的，也可以采用原生js的方式开发，看个人喜好)
先来看下效果吧
开发前准备
1. 一张地球全景平面图
2. 搭建一个三维场景，场景中添加网格模型（前面几讲有具体讲到如何搭建一个三维场景以及添加网格模型，添加相机，灯光，渲染器等）
3. 纹理加载器 （TextureLoader）
废话就讲到这里了，直接上代码看效果吧
<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,// 平面plane: null,// 点光源point: null,// stepstep:0};},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.SphereGeometry(30, 50, 50);// 纹理加载器 （ 此处加载贴图 ）var texture = new THREE.TextureLoader().load(require('./Earth.png'));// 几何体材质对象var material = new THREE.MeshLambertMaterial({map: texture});// 创建网格模型对象this.mesh = new THREE.Mesh(geometry, material);//设置几何体位置this.mesh.position.x = 0;this.mesh.position.y = 10;this.mesh.position.z = 0;this.scene.add(this.mesh);// 创建点光源var point = new THREE.PointLight("#FFF");point.position.set(40, 200, 30);this.point = point;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>
废话说的有点多，程序员都喜欢直接看代码，哈哈，不喜勿喷
下一章节我们学啥？ 下一章节我们一起来研究下如何加载一个视频纹理渲染吧
觉得本文对你有帮助？请分享给更多人
关注==>>「前端开发爱好者」，一起提升前端技能！