好久没更新three.js 了，前三章了解了部分基础知识。这一章我们来搞点事情，做点有意思的东西。
效果如下图：
因为截图是静止的，实际效果是地球在自转。
废话不多说，上代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>erath - three.js</title> ???<script src="js/three.js"></script> ???<script src="js/jquery.min.js"></script></head><style> ???* { ???????padding: 0px; ???????margin: 0px; ???} ???????html,body,.main { ???????????width: 100%; ???????????height: 100%; ???????????overflow: hidden; ???????}</style><body> ???<div class="main"></div></body></html><script> ???function Three(className) { ???????this.width = $(className).width(); ???????this.height = $(className).height(); ???????this.renderer = ?new THREE.WebGLRenderer({ ???????????antialias : true ??//开启锯齿，默认是false ???????}); ???????this.renderer.setSize(this.width, this.height); // 给渲染区域设置宽高 ???????this.renderer.setClearColor("white"); // 设置背景色 ???????$(className).append(this.renderer.domElement); ????} ???Three.prototype = { ???????init:function() { ???????????this.scence = new THREE.Scene(); ?// 创建舞台 ???????????????????????// 设置视角及参数 ???????????this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 10000); ???????????this.camera.position.set(0,0,10); ???????????this.camera.lookAt(new THREE.Vector3(0, 0, 0)); ??? // 设置灯光及参数 ???????????this.light = new THREE.AmbientLight(0xDDDDDD); ???????????this.light.position.set(100, 100, 200); ???????????this.scence.add(this.light); ???????????// 创建角色 ???????????var circle = ?new THREE.SphereGeometry(755,50,50); ???????????var texture = new THREE.TextureLoader(); ???????????????????????var material = new THREE.MeshBasicMaterial(); ???????????// 给circle添加背景图片 ???????????material.map = texture.load("images/earth_atmos_4096.jpg",function(){ ???????????????three.renderer.render(three.scence, three.camera); ???????????}); ???????????three.mesh = new THREE.Mesh(circle,material); ???????????three.mesh.position.set(0,0,-5000); ???????????three.scence.add(three.mesh); ???????}, ???????animate:function() { ???????????requestAnimationFrame(three.animate); ???????????three.mesh.rotation.y += 0.01; ???????????three.renderer.render(three.scence, three.camera); ???????}, ???????start:function() { ???????????this.init(); ???????????this.animate(); ???????} ???} ???var three = new Three(".main"); ???three.start();</script>这里我把地球图片上传上来，不然没有图片也无法加载。
最后提醒大家一点，当有图片加载到three.js 时，需要在服务器端运行。不然也会报错。
今天的three.js 就讲到这里了，下次再会。
three.js - (入门四)
原文地址：https://www.cnblogs.com/lafitewu/p/8241987.html