Question

如何使此示例中的功能：

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

我正在纠正此错误：

未捕获的TypeError：无法读取null的属性“ setFromCamera”。

这是我的代码：

    <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有所了解。请帮我。谢谢。

Answer 1

您必须等待场景加载完毕：

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

您的场景中没有任何实体带有raycaster实体，因此document.querySelector(‘[raycaster]’)将返回null

您还需要在组件而不是实体上调用函数：

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

可能还有其他问题。我建议您通读A-Frame docs，以使您熟悉场景和组件API。

Aframe-在非球面或视频球面或天空中绘制

1 个答案: