Threejs - 几行代码带你创建三维地球

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

需要具备哪些知识 ？

前端开发中的一些基础知识，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,
 // step step: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>

废话说的有点多，程序员都喜欢直接看代码，哈哈，不喜勿喷

下一章节我们学啥？ 下一章节我们一起来研究下如何加载一个视频纹理渲染吧

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

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