<!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. Android的Fragment的第一种声明方式

    Android的Frangment的第一种声明方式 实际效果图如下: 项目结构图如下: fragment1: package com.demo.fragementfirst; import andro ...

  2. vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类 ...

  3. 利用:before和:after伪类制作CSS3 圆形按钮 含demo

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  4. scala-04-set操作

    Scala Set(集合)是没有重复的对象集合,所有的元素都是唯一的. Scala 集合分为可变的和不可变的集合. 默认情况下,Scala 使用的是不可变集合,如果你想使用可变集合,需要引用 scal ...

  5. PHP 使用 GeoIP 进行不同国家 ip 测试

    $ip = "67.220.91.30";// USA switch (mt_rand(0, 15)) { case 0:// India $ip = "210.212. ...

  6. Async异步编程入门示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Docker轻量级web图形页面管理 - Portainer部署记录

    Docker图形页面管理工具基本常用的有三种: Docker UI,Shipyard,Portainer,之前分别介绍了Docker UI和Shipyard部署,下面简单介绍下Portainer部署. ...

  8. 【K8S学习笔记】Part3：同一Pod中多个容器间使用共享卷进行通信

    本文将展示如何使用共享卷(Volume)来实现相同Pod中的两个容器间通信. 注意:本文针对K8S的版本号为v1.9,其他版本可能会有少许不同. 0x00 准备工作 需要有一个K8S集群,并且配置好了 ...

  9. Java RMI 框架（远程方法调用）

    转自:http://haolloyin.blog.51cto.com/1177454/332426 RMI(即Remote Method Invoke 远程方法调用).在Java中,只要一个类exte ...

  10. Git学习笔记3

    git checkout 命令git checkout -- readme.txt意思就是,把readme.txt文件在工作区的修改全部撤销,这里有两种情况: 一种是readme.txt自修改后还没有 ...