<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <script type="text/javascript" src=".\build\three.js"></script>

    <script src=".\examples\js\controls\TrackballControls.js"></script>

    <script src=".\examples\js\controls\DragControls.js"></script>

    <style>

        body

        {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<!-- 作为Three.js渲染器输出元素 -->

<div id="WebGL-output">

</div>

<!-- 第一个 Three.js 样例代码 -->

<script type="text/javascript">

    var camera, scene, renderer;

    var sphere;

    var controls;

    var objects = [];

    var fov = 45;

    var near = 0.1;

    var far = 1000;

    init();

    render();

    function init() {

        scene = new THREE.Scene();      //创建场景

        camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);   //创建摄像机

        camera.position.x = 100;

        camera.position.y = 100;

        camera.position.z = 100;

        camera.lookAt(scene.position);

        renderer = new THREE.WebGLRenderer();                    //创建一个WebGL渲染器并设置其大小

        renderer.setClearColor(new THREE.Color("#000000"));

        renderer.shadowMapEnabled = true;

        renderer.setSize(window.innerWidth, window.innerHeight);

        var ambientLight = new THREE.AmbientLight("#ffffff");       //加入场景光

        scene.add(ambientLight);

       // var pointLight = new THREE.PointLight("#ffffff");         //加入点光源

       // pointLight.position.set(110, 110, 110);

       // pointLight.castShadow = true;

        //scene.add(pointLight);

        var axes = new THREE.AxisHelper(200);               //创建三轴表示

        scene.add(axes);

        controls = new THREE.TrackballControls(camera);     //创建场景旋转缩放事件

        controls.rotateSpeed = 2.5;

        controls.zoomSpeed = 1.2;

        controls.panSpeed = 0.8;

        controls.noZoom = false;

        controls.noPan = false;

        controls.staticMoving = true;

        controls.dynamicDampingFactor = 0.3;

        sphere = createMesh(new THREE.SphereGeometry(100, 100, 100), "./earth.jpg");

        scene.add(sphere);

        window.addEventListener('resize', onWindowResize, false);

    }

    function createMesh(geom, imageFile) {

        var texture = THREE.ImageUtils.loadTexture(imageFile);

        var mat = new THREE.MeshPhongMaterial({ map: texture });

        var mesh = new THREE.Mesh(geom, mat);

        return mesh;

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function render() {

        requestAnimationFrame(render);

        controls.update();

        sphere.material.map.needsUpdate = true;

        renderer.render(scene, camera);

    }

    document.getElementById("WebGL-output").appendChild(renderer.domElement);

</script>

</body>

</html>

不知道为什么，我再IE下能显示地球，在chrome下显示不了。

地球贴图下载地址：https://pan.baidu.com/s/1kVflpNh

【three.js练习程序】创建地球贴图的更多相关文章

  1. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  2. 用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本

    用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...

  3. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  4. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：为ASP.NET MVC应用程序创建更复杂的数据模型

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第六篇:为ASP.NET MVC应用程序 ...

  5. Xamarin iOS编写第一个应用程序创建工程

    Xamarin iOS编写第一个应用程序创建工程 在Xcode以及Xamarin安装好后,就可以在Xamarin Studio中编写程序了.本节将主要讲解在Xamarin Studio中如何进行工程的 ...

  6. 编程第一个Apple Watch程序创建项目

    编程第一个Apple Watch程序创建项目 2.4  编程第一个程序 本节将通过编写第一个程序,为开发者讲解如何添加Watch应用对象.运行程序.界面设计.编写代码等内容本文选自Apple Watc ...

  7. Contoso 大学 - 1 - 为 ASP.NET MVC 应用程序创建 EF 数据模型

    原文 Contoso 大学 - 1 - 为 ASP.NET MVC 应用程序创建 EF 数据模型 原文地址:Creating an Entity Framework Data Model for an ...

  8. MVC中使用EF(1)：为ASP.NET MVC程序创建Entity Framework数据模型

    为ASP.NET MVC程序创建Entity Framework数据模型 (1 of 10) By  Tom Dykstra |July 30, 2013 Translated by litdwg   ...

  9. 为ASP.NET MVC应用程序创建更复杂的数据模型

    为ASP.NET MVC应用程序创建更复杂的数据模型 2014-05-07 18:27 by Bce, 282 阅读, 1 评论, 收藏, 编辑 这是微软官方教程Getting Started wit ...

随机推荐

  1. iOS 8.0 bluetooth peripheral manager giving no callback for addService

    I am adding the service using: [self.peripheralManager addService:myService]; Is this method depreca ...

  2. Javac中的nullcheck

    Javac会通过调用引用对象的getClass()来判空,主要有几处: (1)JCMethodInvocation()方法中,如下实例: class A{ class B{} } public cla ...

  3. redis源码学习-skiplist

    1.初步认识跳跃表 图中所示,跳跃表与普通链表的区别在于,每一个节点可以有多个后置节点,图中是一个4层的跳跃表 第0层: head->3->6->7->9->12-> ...

  4. 第三方登录：新浪微博登录（OAuth2.0）

    在<Github第三方登录--通用化的第三方登陆实现>中我们实现了一个通用化的第三方登录框架,其中包括OAUth的基本流程以及最简单的用户注册.但是不同的第三方登录因为其细节不同还是有很多 ...

  5. 编译centos6.5:glibc 升级2.14问题

    第一种:不需要 ln 创建软连接,缺点嘛,就是直接安装到系统文件夹/lib64下,想换回来就比较麻烦.(我选择的第二种,因为公司需要fpm打包,写到脚本里面,第一种之间安装在/usr目录下,打包的包安 ...

  6. KVM：日常管理常用命令

    1.查看.编辑及备份KVM 虚拟机配置文件 以及查看KVM 状态: 1.1.KVM 虚拟机默认的配置文件在 /etc/libvirt/qemu 目录下,默认是以虚拟机名称命名的.xml 文件,如下,: ...

  7. 基数估算HyperLogLog

    HyperLogLog HyperLogLog 可以接受多个元素作为输入,并给出输入元素的基数估算值: • 基数:集合中不同元素的数量.比如 {'apple', 'banana', 'cherry', ...

  8. linux查看系统的硬件信息【转】

    linux查看系统的硬件信息,并不像windows那么直观,这里我罗列了查看系统信息的实用命令,并做了分类,实例解说. cpu lscpu命令,查看的是cpu的统计信息. blue@blue-pc:~ ...

  9. Android so 文件进阶<二> 从dlsym()源码看android 动态链接过程

    0x00  前言 这篇文章其实是我之前学习elf文件关于符号表的学习笔记,网上也有很多关于符号表的文章,怎么说呢,感觉像是在翻译elf文件格式的文档一样,千篇一律,因此把自己的学习笔记分享出来.dls ...

  10. PTA (Advanced Level) 1007 Maximum Subsequence Sum

    Maximum Subsequence Sum Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous su ...