<!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. SQL SERVICE 拆分字符串的表值函数

    SQL代码 ALTER FUNCTION [dbo].[SplitToTable]( @SplitString nvarchar(max), @Separator nvarchar(10)=' ')R ...

  2. Vue中使用watch来监听数据变化

    写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...

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

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

  4. guava EventBus 消息总线的运用

    public class Test { public static void main(String[] args) { final EventBus eventBus = new EventBus( ...

  5. linux less命令详情

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more .tail更加的有弹性.在 more 的时候,我们并没有办 ...

  6. WPF中Grid的行的Height和列的Width根据内容自适应

    Grid中RowDefinition的Height和ColumnDefinition的设置都有三种: 1. 具体数值,固定不变: 2. * 星号,如: 2*,5*,8*: 分母为(2+5+8=15), ...

  7. spring web应用

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. asp.net mvc 微信公众号token验证

    本人的公众号要申请成为开发者,必须经过token认证.微信公众号的官方代码只列出了PHP代码的实例,明显是歧视.net用户.我用的asp.net mvc中的web api,结果调了好久都没有成功,最后 ...

  9. vue-router 知识点记录

    vue-router参数传递   1.在vue-router中,有两大对象被挂载到了实例this2.$route(只读.具备信息的对象).$router(具备函数功能).例:获取query用 this ...

  10. C＃ 将dll打包到程序中

    本文告诉大家如何把 dll 打包到程序中.很多时候的 软件 在运行的时候需要包括很多 dll 或其他的文件,这样的软件在给其他小伙伴,就需要做一个压缩包,或者用安装软件.这样感觉不太好,所以本文告诉大 ...