案例:Three 纹理贴图10-视频贴图     状态:可编辑再运行    进入竖版
 运行结果 
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
     // 创建video对象
23
let video = document.createElement('video');
24
video.src = "/img/movie.mp4"; // 设置视频地址
25
video.autoplay = "autoplay"; //要设置播放
26
video.loop="loop"; //设置循环播放模式
27
// video对象作为VideoTexture参数创建纹理对象
28
var texture = new THREE.VideoTexture(video)
29
var geometry = new THREE.PlaneGeometry(108, 71); //矩形平面
30
var material = new THREE.MeshPhongMaterial({
31
  map: texture, // 设置纹理贴图
32
}); //材质对象Material
33
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
34
scene.add(mesh); //网格模型添加到场景中
35
      
36
      
37
    /**
38
     * 光源设置
39
     */
40
    //点光源
41
    var point = new THREE.PointLight(0xffffff);
42
    point.position.set(400, 200, 300); //点光源位置
43
    scene.add(point); //点光源添加到场景中
44
    //环境光
45
    var ambient = new THREE.AmbientLight(0x444444);
46
    scene.add(ambient);
47
      
48
    //添加坐标系