<!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. Redis学习系列三List列表

    一.简介 Redis中的列表相当于C#中的LinkedList,也就是链表,如果你研究过链表这个数据结构,肯定知道.它的插入和删除是非常快的,但是定位却很慢,因为必须遍历所有的元素,才能找到对应的值, ...

  2. Kafka消费异常处理

    org.apache.kafka.clients.consumer.CommitFailedException: Commit cannot be completed since the group ...

  3. Android开发艺术探索学习笔记（四）

    第四章 View的工作原理 4.1初识ViewRoot和DecorView ViewRoot是连接WindowManager和DecorView的纽带,View的三大流程均是通过ViewRoot来完成 ...

  4. kmp模式串匹配

    大二的时候百度看不懂,现在大三下学期了百度也看不懂.(实在是不能理解这个next数组究竟是怎么样工作的,为什么会得出那样的结果.)如果有好心人知道的话希望可以联系我告诉我(邮箱:4609019410@ ...

  5. 配置Codis-Service主机

    Codis-Service配置在三台机器上,每台机器分别配置3个redis,如下: ip:(redis-.redis-.redis-) ip:(redis-.redis-.redis-) ip:(re ...

  6. 浏览器对CSS小数点的解析——坑

    在写移动端项目时,为了将一个元素垂直居中,于是我将元素的高和行高设置成一样的,但是显示出来的结果,却让人不得其解,如下: 可以看到按钮的底部有一条缝隙,一开始以为是代码写错了,于是检查了一下,发现没啥 ...

  7. Mysql索引会失效的几种情况分析

    转:https://www.jb51.net/article/50649.htm 学习啦

  8. centos7 安装配置postgresql

    考:https://www.linuxidc.com/Linux/2017-10/147536.htm http://blog.51cto.com/12482328/2090844 https://w ...

  9. Unity3D第一战：软件安装与代码调试

    1.软件的安装 Unity3D可以轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,功能非常强大. 最新版下载地址:http://unity3d.com/u ...

  10. elasticSearch6源码分析(12)DiscoveryModule

    1.DiscoveryModule概述 /** * A module for loading classes for node discovery. */ 2.discovery The discov ...