Aframe - рисовать в a-сфере или видеосфере или a-sky - PullRequest
Новая
       6

Aframe - рисовать в a-сфере или видеосфере или a-sky

0 голосов
/ 24 сентября 2018

Как сделать функцию, как в этом примере:

https://codepen.io/knee-cola/pen/OpmYyp.

Я получаю эту ошибку:

Uncaught TypeError: Cannot read property 'setFromCamera 'of null.

Это мой код: 

    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <title>EXPERIMENT ONLY</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="aframe.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    document.addEventListener('mousemove', onMouseMove, false);
    });




    function onMouseMove(ev) {

    var sceneEl = document.querySelector('a-scene');


    ev.preventDefault();
    ev.cancelBubble = true;
    var app = this;
    var threePoint = _findIntersection(sceneEl, ev.clientX, ev.clientY);

    }

    function _findIntersection(app, clientX, clientY) {

    var raycasterEl = AFRAME.scenes[0].querySelector('[raycaster]');
    var sphereEl = document.querySelector('#bilog');
    var cameraEl = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // converting click coordinates from document-space to Three space
    var mouseRay = new THREE.Vector2();
    mouseRay.x = ( clientX / window.innerWidth ) * 2 - 1;
    mouseRay.y = - ( clientY / window.innerHeight ) * 2 + 1;

    // intersecting mouse ray with all the objects in the scene
    raycasterEl.setFromCamera(mouseRay, cameraEl);
    var intersects = raycasterEl.intersectObjects( sphereEl );

    if(intersects.length===0) {
    return(null);
    }

    return(intersects[0].point);
    }


    </script>
    </head>

    <body>

    <a-scene>

    <a-assets>

    <canvas id="my-canvas" crossorigin="anonymous"></canvas>

    </a-assets>

    <a-sphere id="bilog" radius="1" material="src: #my-canvas; side:front" draw-canvas="my-canvas" position="0 0 0"></a-sphere>

    <a-sky color="#ECECEC"></a-sky>

    </a-scene>

    </body>
    </html>

Я очень старался, но все еще безуспешно.Я не знаю three.js и немного разбираюсь в Aframe.Пожалуйста, помогите мне.Спасибо.

1 Ответ

0 голосов
/ 24 сентября 2018

Вам нужно дождаться загрузки сцены: 

document.querySelector(‘a-scene’).addEventListener(‘loaded’, function() { ... your code ... });

В вашей сцене нет сущности с сущностью raycaster, поэтому document.querySelector(‘[raycaster]’) вернет ноль

Вам также нужно вызватьфункция компонента, а не объекта: 

raycasterEl.components.raycaster.setFromCamera(...)

Могут быть и другие проблемы.Я рекомендую ознакомиться с документами A-Frame , чтобы познакомить вас с API-интерфейсами сцены и компонентов

...