案例:Three 纹理贴图9-canvas方式     状态:可编辑再运行    进入竖版
 运行结果 
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
 * 创建一个canvas对象,并绘制一些轮廓
24
 */
25
var canvas = document.createElement("canvas");
26
canvas.width = 512;
27
canvas.height = 128;
28
var c = canvas.getContext('2d');
29
// 矩形区域填充背景
30
c.fillStyle = "#ff00ff";
31
c.fillRect(0, 0, 512, 128);
32
  c.beginPath();
33
// 文字
34
c.beginPath();
35
c.translate(256,64);
36
c.fillStyle = "#000000"; //文本填充颜色
37
c.font = "bold 48px 宋体"; //字体样式设置
38
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
39
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
40
c.fillText("w3xue.com", 0, 0);
41
42
// canvas画布对象作为CanvasTexture的参数重建一个纹理对象
43
// canvas画布可以理解为一张图片
44
var texture = new THREE.CanvasTexture(canvas);
45
//打印纹理对象的image属性
46
// console.log(texture.image);
47
//矩形平面
48
var geometry = new THREE.PlaneGeometry(128, 32);