How can I add a spotlight?

[huohuli008]

I add a SpotLight with SpotLightHelper to three box use tb.Object3D({obj:spotLight}),and setCoords(coords),but the SpotLightHelper `s coordinates looks like at the (0,0) even I set any coords, here is the code can be use to test.

`

<script src='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />

<script src='https://unpkg.com/[email protected]/build/three.min.js'></script>

<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #map {
        width: 100%;
        height: 100%;
    }
</style>

<script>
    var mesh;

    mapboxgl.accessToken = 'pk.eyJ1IjoiaHVvaHVsaTAwOCIsImEiOiJjanM3Z3B1eHMwNG0zNDRtajhhcXNnanQwIn0.7gLFPHv_tXytt_JYLMze4w';
    var origin = [1, 1, 50];

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        center: origin,
        zoom: 15.95,
        pitch: 60,
        heading: 41,
        hash: true,
    });
    var active = false
    map.on('load', function () {
        map.addLayer({
            id: 'custom_layer',
            type: 'custom',
            onAdd: function (map, mbxContext) {
                window.tb = new Threebox(
                    map,
                    mbxContext,
                    { defaultLights: true, passiveRendering: false }
                );

                var geometry = new THREE.BoxGeometry(1000, 1000, 1000);
                var material = new THREE.MeshLambertMaterial({
                    color: 0x0000ff
                });
                mesh = new THREE.Mesh(geometry, material);

                cube = tb.Object3D({ obj: mesh })
                    .setCoords(origin);

                tb.add(cube)

                addLight(cube);
            },

            render: function (gl, matrix) {
                tb.update();
                render123();
            }
        });
    });

    function render123() {
        mesh.rotateX(0.01);
    }

    function addLight(cube) {
        var spotLight = new THREE.SpotLight('red');
        spotLight.intensity = 500000;
        spotLight.angle = 0.1;
        spotLight.castShadow = true;
        spotLight.distance = 100000;
        spotLight.target = cube;

        setCoords(spotLight);

        var spotLightHelper = new THREE.SpotLightHelper(spotLight);
        setCoords(spotLightHelper);
    }

    function setCoords(obj, coords = origin) {
        var obj3D = window.tb.Object3D({ obj: obj })
            .setCoords(coords);
        window.tb.add(obj3D);
    }

</script>

`

[MagicBYang]

@huohuli008 Same problem I get part of the answer to the SpotLightHelper question. 1.I find SpotLightHelper is wrong display but the actually the SpotLight run properly under threebox. 2.The SpotLightHelper appers to be wrong on calculating the matrix inside it`s hard to be corrected from outside threebox. 3.What I recommend is that you should build a alternative helper thing just like the pic below

It`s not work as good as SpotLightHelper but it helps me to deal with the SpotLight problem. Hope to give you some help.