three.js改全景3D房间，有一面要放视频，一直显示不出来，不知道是啥原因，有没有知道的啊。下面是代码

最新推荐文章于 2024-06-13 10:27:10 发布

Carl--Liu

最新推荐文章于 2024-06-13 10:27:10 发布

阅读量391

点赞数

分类专栏： three 文章标签： javascript js webgl

本文链接：https://blog.csdn.net/qq_41573447/article/details/108981410

版权

three 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>three.js css3d - panorama</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #000000;
            margin: 0;
            cursor: move;
            overflow: hidden;
        }
        
        a {
            color: #ffffff;
        }
        
        #info {
            position: absolute;
            width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            font-weight: bold;
            z-index: 1;
        }
        
        #video {
            position: absolute;
            width: 0;
            height: 0;
        }
    </style>
</head>

<body>
    <script src="../build/three.js"></script>
    <script src="js/renderers/CSS3DRenderer.js"></script>
    <link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>

    <video id="video" autoplay loop>
        <source src="video.mp4">
    </video>
    <script>
        var camera, scene, renderer;
        var geometry, material, mesh;
        var target = new THREE.Vector3();

        var lon = 90,
            lat = 0;
        var phi = 0,
            theta = 0;

        var touchX, touchY;

        init();
        animate();

        function init() {

            scene = new THREE.Scene(); //创建场景
            camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 100, 1000); //创建相机

            scene.add(camera)


            var sides = [{
                    url: 'photos1.png',
                    position: [-500, 56, 0],
                    rotation: [0, Math.PI / 2, 0]
                }, {

                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [500, 0, 0], //左1[前，上，左]
                    rotation: [0, -Math.PI / 2, 0]
                }, {
                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [0, -240, -270], //地下[前,上，左]
                    rotation: [Math.PI / 2, 0, Math.PI],
                }, {
                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [0, 240, -270], //顶1[前，上，左]
                    rotation: [-Math.PI / 2, 0, Math.PI]
                }, {
                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [0, 240, 200], //顶2[前，上，左]
                    rotation: [-Math.PI / 2, 0, Math.PI]
                }, {
                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [0, 0, -500],
                    rotation: [0, Math.PI, 0]
                },
                // texture
                {
                    url: 'textures/cube/Bridge2/24.jpg',
                    position: [0, 0, 500], //第一张[左，上，中心点距离]
                    rotation: [0, 0, 0]
                }
            ];




            for (var i = 0; i < sides.length; i++) {

                var side = sides[i];
                if (i == 6) {


                    var planeGeometry = new THREE.PlaneGeometry(100, 500); //创建平面
                    var material = new THREE.MeshPhongMaterial();
                    material.side = THREE.DoubleSide;

                    var video = document.getElementById("#video");

                    // video对象作为VideoTexture参数创建纹理对象
                    var texture = new THREE.VideoTexture(video);
                    texture.minFilter = THREE.LinearFilter;
                    texture.magFilter = THREE.LinearFilter;
                    texture.format = THREE.RGBFormat;
                    material.map = texture;

                    var mesh = new THREE.Mesh(planeGeometry, material);
                    mesh.position.set(0, 0, 500);

                    scene.add(mesh); //网格模型添加到场景中


                } else {
                    var element = document.createElement('img');
                    element.width = 1026; // 2 pixels extra to close the gap.
                    element.src = side.url;
                    var object = new THREE.CSS3DObject(element);
                    object.position.fromArray(side.position);
                    object.rotation.fromArray(side.rotation);
                    scene.add(object);
                }


            }

            renderer = new THREE.CSS3DRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            document.addEventListener('mousedown', onDocumentMouseDown, false);
            document.addEventListener('wheel', onDocumentMouseWheel, false);

            document.addEventListener('touchstart', onDocumentTouchStart, false);
            document.addEventListener('touchmove', onDocumentTouchMove, false);

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function onDocumentMouseDown(event) {

            event.preventDefault();

            document.addEventListener('mousemove', onDocumentMouseMove, false);
            document.addEventListener('mouseup', onDocumentMouseUp, false);

        }

        function onDocumentMouseMove(event) {

            var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
            var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

            lon -= movementX * 0.1;
            lat += movementY * 0.1;

        }

        function onDocumentMouseUp(event) {

            document.removeEventListener('mousemove', onDocumentMouseMove);
            document.removeEventListener('mouseup', onDocumentMouseUp);

        }

        function onDocumentMouseWheel(event) {

            var fov = camera.fov + event.deltaY * 0.05;

            camera.fov = THREE.Math.clamp(fov, 10, 75);

            camera.updateProjectionMatrix();

        }

        function onDocumentTouchStart(event) {
            event.preventDefault();

            var touch = event.touches[0];

            touchX = touch.screenX;
            touchY = touch.screenY;

        }

        function onDocumentTouchMove(event) {

            event.preventDefault();

            var touch = event.touches[0];

            lon -= (touch.screenX - touchX) * 0.1;
            lat += (touch.screenY - touchY) * 0.1;

            touchX = touch.screenX;
            touchY = touch.screenY;

        }

        function animate() {

            requestAnimationFrame(animate);

            // lon += 0.1;
            // lat = Math.max(-85, Math.min(85, lat));
            phi = THREE.Math.degToRad(90 - lat);
            theta = THREE.Math.degToRad(lon);

            target.x = Math.sin(phi) * Math.cos(theta);
            target.y = Math.cos(phi);
            target.z = Math.sin(phi) * Math.sin(theta);

            camera.lookAt(target);

            renderer.render(scene, camera);

        }
    </script>

</body>

</html>

Carl--Liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js改全景3D房间，有一面要放视频，一直显示不出来，不知道是啥原因，有没有知道的啊。下面是代码

<!DOCTYPEhtml><html><head><title>three.jscss3d-panorama</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1...
复制链接

扫一扫