<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js canvas - geometry - earth</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>

        body {

            color: #808080;

            font-family:Monospace;

            font-size:13px;

            text-align:center;

            background-color: #ffffff;

            margin: 0px;

            overflow: hidden;

        }

        #info {

            position: absolute;

            top: 0px; width: 100%;

            padding: 5px;

        }

        a {

            color: #0080ff;

        }

    </style>

</head>

<body>

<div id="container"></div>

<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - earth demo</div>

<script src="../build/three.js"></script>

<script src="js/renderers/Projector.js"></script>

<script src="js/renderers/CanvasRenderer.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>

    var container, stats;

    var camera, scene, renderer;

    var group;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;

    var windowHalfY = window.innerHeight / 2;

    init();

    animate();

    function init() {

        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );

        camera.position.z = 500;

        scene = new THREE.Scene();

        group = new THREE.Group();

        scene.add( group );

        // earth

        var loader = new THREE.TextureLoader();

        loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {

            var geometry = new THREE.SphereGeometry( 200, 20, 20 );

            var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );

            var mesh = new THREE.Mesh( geometry, material );

            group.add( mesh );

        } );

        // shadow

        var canvas = document.createElement( 'canvas' );

        canvas.width = 128;

        canvas.height = 128;

        var context = canvas.getContext( '2d' );

        var gradient = context.createRadialGradient(

                canvas.width / 2,

                canvas.height / 2,

                0,

                canvas.width / 2,

                canvas.height / 2,

                canvas.width / 2

        );

        gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );  //0.1范围的灰色

        gradient.addColorStop( 1, 'rgba(255,255,255,1)' );    //整个范围的白色（相叠加达到影子的效果）

        context.fillStyle = gradient;

        context.fillRect( 0, 0, canvas.width, canvas.height );

        var texture = new THREE.CanvasTexture( canvas );

        var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );

        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw:0.5 } );

        var mesh = new THREE.Mesh( geometry, material );

        mesh.position.y = - 250;

        mesh.rotation.x = - Math.PI / 2;

        group.add( mesh );

        renderer = new THREE.CanvasRenderer();

        renderer.setClearColor( 0xffffff );

        renderer.setPixelRatio( window.devicePixelRatio );

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

        container.appendChild( renderer.domElement );

        stats = new Stats();

        container.appendChild( stats.dom );

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

        //

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

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;

        windowHalfY = window.innerHeight / 2;

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

        camera.updateProjectionMatrix();

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

    }

    function onDocumentMouseMove( event ) {

        mouseX = ( event.clientX - windowHalfX );

        mouseY = ( event.clientY - windowHalfY );

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();

        stats.update();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * 0.05;

        camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

        camera.lookAt( scene.position );

        group.rotation.y -= 0.005;

        renderer.render( scene, camera );

    }

</script>

</body>

</html>

THREE.js代码备份——canvas - geometry - earth(球体贴纹理)的更多相关文章

  1. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  2. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  3. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  4. THREE.js代码备份——canvas_lines(随机点、画线)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  5. THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...

  6. THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...

  7. THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...

  8. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

  9. 代码备份 | 博客侧边栏公告（支持HTML代码）（支持JS代码）

    博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...

随机推荐

  1. NOIP2014 提高组合集

    NOIP 2014 提高组 合集 D1 T1 生活大爆炸版石头剪刀布 首先,先将两个人的猜拳序列都变得不小于n.然后逐个模拟.胜败什么的看表就行了. #include <iostream> ...

  2. 1010 过河卒 2002年NOIP全国联赛普及组codevs

    1010 过河卒  2002年NOIP全国联赛普及组codevs 题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点 ...

  3. 如何在eclipse中用maven编译

    在eclipse中用maven编译的方法: 在项目中的“pom.xml”文件上点击右键,在弹出的菜单中选择“Run AS”à“Maveninstall”来编译和生成项目.如下图所示: 在编译和生成过程 ...

  4. 1.4－动态路由协议OSPF③

    OSPF的路由汇总 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                         用默认的网络地址 因为 无论在何种路 ...

  5. 使用jcaptcha插件生成验证码

    1.从官网http://jcaptcha.sourceforge.net/下载插件.将对应jar包导入到lib文件夹下 2.创建一个CaptchaServiceSingleton类用来获取jcaptc ...

  6. Intellij IDEA安装插件

    从Eclipse到Intellij IDEA换过来,还是没有适应,并且电脑异常的卡顿,4核4G内存的机器表示伤不起.Intellij IDEA还有待我进行调教. 今天说明一下怎样安装插件.以keyPr ...

  7. Swift 中枚举

    Swift 中枚举高级用法及实践 字数11017 阅读479 评论0 喜欢20 title: "Swift 中枚举高级用法及实践"date: 2015-11-20tags: [AP ...

  8. AngularJS入门学习

    初识: {{}}   这种双层花括号的语法称之为:插值语法:也可以说是 标识符:AngularJS 主要就是使用这种方法进行数据绑定 ng-module="name"   在ng的 ...

  9. Android资源之图像资源（图像级别资源）

    图像状态资源仅仅能定义有限的几种状态. 假设须要很多其它的状态,就要使用图像级别资源. 在该资源文件里能够定义随意多个图像级别. 每一个图像级别是一个整数区间,能够通过ImageView.setIma ...

  10. GitHub 高速上手 ---- 创建密钥，连接

    首先要在GitHub上创建一个帐号,因为本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以要在本地生成一个私钥和一个密钥 命令,后面跟的邮箱.要跟你自己的:增加输出的位置:能够不用设置 ...