# 贴图-动态图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>003-04-全景图融合视频</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #video {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            display: none;
        }
    </style>
</head>
<body>
<div id="container"></div>


<img id="img" src="http://192.168.1.18" style="width: 500px; height:300px;position: fixed;top: 0;left: 0;z-index: 999">

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
<script>
    //定义场景、相机、渲染器
    let camera, scene, renderer;
    //窗口的宽和高
    let height = window.innerHeight;
    let width = window.innerWidth;
    let container, mesh;
    container = document.getElementById('container');
    //定一个透视摄像头
    camera = new THREE.PerspectiveCamera(75, width / height, 1, 1100);
    camera.target = new THREE.Vector3(0, 0, 0);
    scene = new THREE.Scene();
    //定义一个球体
    let geometry = new THREE.SphereBufferGeometry(300, 60, 40);
    //表面翻转到内部;
    geometry.scale(-1, 1, 1);
    let textureLoader = new THREE.TextureLoader();

    //全景图片
    //图片
    let image = new THREE.TextureLoader().load('../static/images/bgs.jpg');
    //图片材质
    let material = new THREE.MeshBasicMaterial({
        map: image
    });
    //设置网格模型的形状和材质
    mesh = new THREE.Mesh(geometry, material);
    //添加到场景中
    scene.add(mesh);

    //视频播放
    //视频
    let texture = textureLoader.load('http://192.168.1.18/');
    //视频材质
    let material1 = new THREE.MeshBasicMaterial({
        map: texture
    });
    //定义一个矩形
    let geometry1 = new THREE.PlaneGeometry(100, 60);
    let rect = new THREE.Mesh(geometry1, material1);
    // rect.geometry.scale(-1, 1, 1);
    rect.position.set(125, -18, -85);
    rect.rotateY(-Math.PI / 4);
    // rect.translate(0, 0, 0);
    scene.add(rect);

    //定时更新贴图，起到视频播放的效果
    setInterval(function () {
        //更新贴图
        material1.map=textureLoader.load( 'http://192.168.1.18/' );
        //设置update生效
        rect.material.map.needsUpdate = true;
    },100);

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);

    let controls = new THREE.OrbitControls(camera, renderer.domElement); // 创建相机控制器，用鼠标键盘来来控制相机
    controls.enableDamping = true; // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.dampingFactor = 1;// 动态阻尼系数 就是鼠标拖拽旋转灵敏度
    controls.enableZoom = true;// 是否可以缩放
    controls.autoRotate = false;// 是否自动旋转
    controls.minDistance = 10;// 设置相机距离原点的最近距离
    controls.maxDistance = 50;// 设置相机距离原点的最远距离
    controls.enablePan = false;// 是否开启右键拖拽


    render();

    function render() {
        renderer.render(scene, camera);// 渲染场景
        requestAnimationFrame(render);// 循环渲染
    }

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
← 贴图-视频