介绍

本demo实现一个旋转的全景地球,效果如下

技术分析

1.球体

2.球体表面贴图

实现

创建容器

<div id="container"></div>

引入js文件

<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/OrbitControls.js"></script>

主体部分

            var container, stats;
var camera, scene, renderer;
var mesh;
var controls; init();
animate(); function init() {
container = document.getElementById( 'container' );
//stats
stats = new Stats();
container.appendChild( stats.dom );
//renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//camera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
//controller
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
//scene
scene = new THREE.Scene();
// earth var loader = new THREE.TextureLoader();
loader.load( 'img/earth.jpg', function ( texture ) {
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
} function animate() {
requestAnimationFrame( animate );
controls.update();
render();
stats.update();
} function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}

核心部分

                var loader = new THREE.TextureLoader();      //载入贴图
loader.load( 'img/earth.jpg', function ( texture ) {
var geometry = new THREE.SphereGeometry( 200, 20, 20 );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );

threejs api的链接:https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene

线上效果:http://htmlpreview.github.io/?https://github.com/zimuqi/ThreeJSEarch/blob/master/earth.html

github上加载很慢 可以下载到底看看效果

【原创】threejs实现一个全景地球的更多相关文章

  1. 【webGl】threejs实现一个简单的动画-弹跳的小球

    在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现 ...

  2. 【原创】PicUploader: 一个还不错的图床工具

    PicUploader PicUploader 是一个用php编写的图床工具,它能帮助你快速上传你的图片到云图床,并自动返回Markdown格式链接到剪贴板.配置完成后,要获取一个可用于markdow ...

  3. 原创《开源一个用 vue 写的树层级组件 vue-ztree》

    最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...

  4. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  5. 【原创】实现一个简单的邮件服务API

    经常在公司写一些内部小程序需要用到发邮件的功能,于是决定写一个邮件服务. 实现思路:以URL形式提供一个RESTful API 给客户端,客户端通过post请求把json格式的邮件信息发送到服务端,服 ...

  6. 【原创】贡献一个项目中用到的js身份证验证-超级准!!!

    前言 百度百科解释:身份证号码 首先贡献一个大神的链接:js验证身份证超准 代码 function checkIdcard(idcard) { var Errors = new Array( &quo ...

  7. (原创)发布一个C++版本的ORM库SmartDB(一)

    先简单说说ORM的优点: 提高开发效率,减少重复劳动,只和业务实体打交道,由业务实体自动生成sql语句,不用手写sql语句. 简单易用, 可维护性好. 隔离数据源,使得我们更换数据源时不用修改代码. ...

  8. 【原创】谈一个数学教育专业的IT职业生涯

    2003年,有许多值得记住,第一个是非典,第二个就是高考数学卷.直到今年2019年,时隔16年,有人说2019年高考数学卷难度堪比2003年,但还没难到2003年的程度. 我,2003年高考,进考场先 ...

  9. 感兴趣的WebGL ,来自微博的一个全景星空图~

    https://m.weibo.cn/z/panorama?oid=1042143:ee51daffe7e7f497069af8c74840bbc2 还有一些好玩的相关链接 http://webgls ...

随机推荐

  1. ABP文档 :Overall - Introduction

    介绍 我们基于不同的需求创建不同的应用,但却在一次又一次地实现相同或相似的结构.至少在某种程度上,授权.验证.异常处理.日志.本地化.数据库连接管理.配置管理.审计日志属于通用的结构. 另外我们总是在 ...

  2. Android笔记

    SYSTEM_ALERT_WINDOW and WRITE_SETTINGS, 这两个权限比较特殊,不能通过代码申请方式获取,必须得用户打开软件设置页手动打开,才能授权.路径是:Settings-&g ...

  3. Django models .all .values .values_list 几种数据查询结果的对比

    Django models .all .values .values_list 几种数据查询结果的对比

  4. 【总结】.Net面试题集锦 (二)

    一.前面的话 本文的面试题不是很难,这里只是想记录个人的思考过程,另一方面希望有更好的解决办法的大牛留下宝贵的思路,大家共同学习进步. 二.题目 思路:第一步:把一维数组的值和次数存入Dictiona ...

  5. Python学习笔记(2) Python提取《釜山行》人物关系

    参考:http://www.jianshu.com/p/3bd06f8816d7 项目原理:   实验基于简单共现关系,编写 Python 代码从纯文本中提取出人物关系网络,并用Gephi 将生成的网 ...

  6. UML(Unified Model Language)统一建模语言

    一.九种图 二.类间关系 一.UML中的九种图 1.用例图(use case diagrams) [概念]描述用户需求,从用户的角度描述系统的功能 [描述方式]椭圆表示某个用例:人形符号表示角色 [目 ...

  7. github教程

    http://www.yangzhiping.com/tech/github.html

  8. mybatis- spring 批量实现数据导入数据库

    终于实现了ibatis的批量插入,此方法插入3000条数据,比单条插入可以节省一半的时间XML代码: <insert id="insertBatch" parameterTy ...

  9. springboot + mysql 编写

    1.springboot+mysql连接因为用的是hibernate框架,所以首先修改model,增加如下内容:

  10. photoshop常见抠图方法

    1.多边形套索:这种工具是用于抠图的边界比较平直,但颜色比较复杂类的图像,它也是最笨最无奈的方法,只能是利用鼠标一点一点去点击抠选.2.磁性套索工具:分为三种:套索,多边形,磁性.这类工具一般只用于边 ...