案例:Three 纹理贴图2-地球     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <style>
6
    body {
7
      margin: 0;
8
      overflow: hidden;
9
      /* 隐藏body窗口区域滚动条 */
10
    }
11
  </style>
12
  <!--引入three.js三维引擎-->
13
  <script src="/js/threejs/threer92.js"></script>
14
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
15
</head>
16
17
<body>
18
  <script>
19
    //创建场景
20
    var scene = new THREE.Scene();
21
22
// 纹理贴图映射到一个矩形平面上
23
//var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
24
//var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
25
var geometry = new THREE.SphereGeometry(60, 25, 25); //球体
26
// 图片加载器
27
var ImageLoader = new THREE.ImageLoader();
28
// load方法回调函数,按照路径加载图片,返回一个html的元素img对象
29
ImageLoader.load('/img/threejs/earth.jpg', function(img) {
30
  // image对象作为参数,创建一个纹理对象Texture
31
  var texture = new THREE.Texture(img);
32
  // 下次使用纹理时触发更新
33
  texture.needsUpdate = true;
34
  var material = new THREE.MeshLambertMaterial({
35
    map: texture, //设置纹理贴图
36
  });
37
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
38
  scene.add(mesh); //网格模型添加到场景中
39
});
40
      
41
      
42
    /**
43
     * 光源设置
44
     */
45
    //点光源
46
    var point = new THREE.PointLight(0xffffff);
47
    point.position.set(400, 200, 300); //点光源位置
48
    scene.add(point); //点光源添加到场景中