案例:Three 纹理贴图11-法线贴图     状态:可编辑再运行    进入竖版
 运行结果 
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
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
23
// TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
24
var textureLoader = new THREE.TextureLoader();
25
// 加载法线贴图
26
var textureNormal = textureLoader.load('/img/threejs/nm.jpg');
27
var material = new THREE.MeshPhongMaterial({
28
  color: 0xff0000,
29
  normalMap: textureNormal, //法线贴图
30
  //设置深浅程度,默认值(1,1)。
31
  normalScale: new THREE.Vector2(3, 3),
32
}); //材质对象Material
33
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
34
scene.add(mesh); //网格模型添加到场景中
35
      
36
    /**
37
     * 光源设置
38
     */
39
    //点光源
40
    var point = new THREE.PointLight(0xffffff);
41
    point.position.set(400, 200, 300); //点光源位置
42
    scene.add(point); //点光源添加到场景中
43
    //环境光
44
    var ambient = new THREE.AmbientLight(0x444444);
45
    scene.add(ambient);
46
      
47
    //添加坐标系
48
    var axisHelper = new THREE.AxisHelper(350);