案例:Three 纹理贴图3-平面世界地图正反可见     状态:可编辑再运行    进入竖版
 运行结果 
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
// TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
27
      
28
      
29
      var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
30
//类型数组创建顶点位置position数据
31
var vertices = new Float32Array([
32
  0, 0, 0, //顶点1坐标
33
  80, 0, 0, //顶点2坐标
34
  80, 80, 0, //顶点3坐标
35
  0, 80, 0, //顶点4坐标
36
]);
37
// 创建属性缓冲区对象
38
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
39
// 设置几何体attributes属性的位置position属性
40
geometry.attributes.position = attribue
41
var normals = new Float32Array([
42
  0, 0, 1, //顶点1法向量
43
  0, 0, 1, //顶点2法向量
44
  0, 0, 1, //顶点3法向量
45
  0, 0, 1, //顶点4法向量
46
]);
47
// 设置几何体attributes属性的位置normal属性
48
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的xyz坐标