Есть ли способ визуализации сцены three.js над элементом HTML видео? - PullRequest
Новая
       10

Есть ли способ визуализации сцены three.js над элементом HTML видео?

0 голосов
/ 26 ноября 2018

Я пытаюсь создать приложение AR, которое размещает маркеры север, восток, юг и запад через камеру телефона.Я хочу визуализировать сцену с прозрачным фоном, который перекрывает видеоэлемент камеры телефона.

Код рендерера (scene.js): 

var scene = new THREE.Scene(),
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
    renderer = new THREE.WebGLRenderer({ alpha: true });

renderer.setClearColor( 0x000000, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

HTML: 

<DOCTYPE html>
    <html>

    <head>
        <link rel="stylesheet" type="text/css" href="../css/style.css">
    </head>

    <body style='margin : 0px; overflow: hidden;'>

        <video id='video' width='100%' autoplay></video>
        <canvas id='canvas' width='100%' height='100%'></canvas>
        <div id="sliderContainer" class="slidecontainer">
            <input type="range" min="0" max="359" value="1" class="slider" id="myRange">
            <p id="sliderOut">0</p>
        </div>

        <script src="../js/three.js"></script>
        <script src="../js/scene.js"></script>
        <script src="../js/deviceCoords.js"></script>
        <script src="../js/location.js"></script>
        <script src="../js/maths.js"></script>
        <script src="../js/video.js"></script>
        <script src="../js/main.js"></script>


    </body>

    </html>

CSS: 

    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%
    }

    #sliderContainer {
        position: absolute;
        z-index: 1;
        width: 100%;
        margin-top: 20%;
    }

    .slider {
        width: 80%;
    }

    #sliderOut {
        color: chartreuse;
    }

    #video {
        position: absolute;
        width: 100%;
        z-index: -10;
    }

Я пытался исследовать это, но все, что я нашел, похоже, не работает.Например, похожий вопрос: Изменение фона three.js на прозрачный или другой цвет

Я новичок в three.js, поэтому я могу неправильно понять, как он работает.

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Я обнаружил, что что-то пошло не так.

У меня был дополнительный элемент canvas под видео, который блокировал показ видео под сценой three.js. 

<video id='video' width='100%' autoplay></video>
<!--Canvas element that was blocking scene-->
    <canvas id='canvas' width='100%' height='100%'></canvas>

    <div id="sliderContainer" class="slidecontainer">
        <input type="range" min="0" max="359" value="1" class="slider" id="myRange">
        <p id="sliderOut">0</p>
    </div>

Сценапосле удаления лишнего холста теперь он прозрачный, и теперь я могу просматривать ленту веб-камеры ниже.

0 голосов
/ 26 ноября 2018

Try:

renderer = new THREE.WebGLRenderer ({alpha: true, preserveDrawingBuffer: true});

и:

renderer.setClearColor (0x000000, 0);

?

...