How can I add a spotlight? #63

huohuli008 · 2019-06-08T12:18:20Z

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.

`<!doctype html>

<title>Raycaster</title> <script src="js/threebox.js" type="text/javascript"></script>

<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/three@0.102.0/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>

`

The text was updated successfully, but these errors were encountered:

MagicBYang · 2020-04-08T06:31:45Z

@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.

ryanwoltz mentioned this issue Dec 1, 2022

Question [Off topic] MagicBYang/KeyBoardDesign87#6

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I add a spotlight? #63

How can I add a spotlight? #63

huohuli008 commented Jun 8, 2019

MagicBYang commented Apr 8, 2020 •

edited

Loading

How can I add a spotlight? #63

How can I add a spotlight? #63

Comments

huohuli008 commented Jun 8, 2019

MagicBYang commented Apr 8, 2020 • edited Loading

MagicBYang commented Apr 8, 2020 •

edited

Loading