<!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. JavaScript -- Window-Name

    -----027-Window-Name.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  2. Python做int()强制类型转换的时候，小数是如何取舍的？

    白月黑羽今天给大家分享一个冷知识:) int()强制类型转换小数是如何取舍的? 使用 int() 将小数转换为整数,小数取整会采用比较暴力的截断方式,即小数点后面的会被强制舍去,向下取整. 例如:5. ...

  3. Jdbc Url 设置allowMultiQueries为true和false时底层处理机制研究

    一个mysql jdbc待解之谜 关于jdbc  url参数 allowMultiQueries 如下的一个普通JDBC示例: String user ="root"; Strin ...

  4. gateway-workman

    最外层start.php,设置全局启动模式,加载Application里的个子服务目录下应用的启动文件(start开头,这些文件都是workman\work类的子类,在载入文件的同时,这些子服务会生成 ...

  5. Android so 文件进阶<三> so文件的简单加密

    0x00  前言 之前的两篇文章从链接视图和执行视图分析了elf文件的大致结构,这篇文章主要内容是对于so文件进行简单的加密工作,针对Ida等静态分析工具的分析,一旦开始动态调试就应该很容易就可以du ...

  6. 【详解】核心组件之UserDetailService

    简介 UserDetails => Spring Security基础接口,包含某个用户的账号,密码,权限,状态(是否锁定)等信息.只有getter方法. Authentication => ...

  7. Android性能测试--垃圾回收频次统计的作用

    频繁的垃圾回收有可能暗示着内存泄露,在我手机统计数据,每次垃圾回收会占据100ms左右,这对内存和事件响应要求严格的程序(游戏等)来讲是可观的性能损耗.

  8. Spring 环境与profile(一)——超简用例

    什么是profile,为什么需要profile? 在开发时,不同环境(开发.联调.预发.正式等)所需的配置不同导致,如果每改变一个环境就更改配置不但麻烦(修改代码.重新构建)而且容易出错.Spring ...

  9. deque双端队列（常用方法总结）

    /*关于C++ STL中deque的学习*/ #include<cstdio> #include<iostream> #include<deque> using n ...

  10. Pycharm---新建文件时 自动添加作者时间等信息

    可用的变量有: $ {PROJECT_NAME} - 当前项目的名称. $ {NAME} - 在文件创建过程中在“新建文件”对话框中指定的新文件的名称. $ {USER} - 当前用户的登录名. $ ...