console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>three.js canvas - geometry - earth</title>
</head>
<body>
<div id="container">
</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/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();

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);
    // 画地球
    // 加载材质
    var loader = new THREE.TextureLoader();
    loader.load('https://threejs.org/examples/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);
        // var canvas = document.createElement('canvas');
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xffffff);//设置canvas背景色
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);//container展示的大小
        container.appendChild(renderer.domElement)//追加 【canvas】 元素到 【container】 元素中
        stats = new Stats();
        //左上角显示性能帧数，每次刷新所用时间，占用内存
        // container.appendChild(stats.dom);
        document.addEventListener('mousemove', onDocumentMouseMove, false);
        animate();
    })
    window.addEventListener('resize', onWindowResize, false);
}
function onDocumentMouseMove (event) {
  //鼠标基于中心点的偏移量
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}
function onWindowResize (event) {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}
function animate () {
  // 每秒60针递归调用 使地球旋转
    requestAnimationFrame(animate);
    render();
    stats.update();
}
function render () {
    camera.position.x
     += (mouseX-camera.position.x)*0.05;//在x轴上，相机根据鼠标的位置移动来移动的距离
    camera.position.y 
    += (-mouseY - camera.position.y)*0.05;//在y轴上，相机根据鼠标的位置移动来移动的距离
    camera.lookAt(scene.position);//设置视野的中心坐标
    group.rotation.y -= 0.005;//让它饶着y轴旋转 （间接的得到旋转的速度）
    renderer.render(scene, camera);//将webgl视图往外输出
}
</script>
</body>
</html>