<commit_before># perspective-camera

<div id="example"></div>
<script type="application/javascript">
  new Vue({
    el: '#example',
    template: '<live-code class="full" :template="code" mode="html>iframe" :debounce="200" />',
    data: {
      code:
`
<body touch-action="none">

<script src="${location.origin+location.pathname}/global.js"><\/script>
<!-- pep.js provides the pointer events (pointermove, pointerdown, etc) -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"><\/script>

<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #191919;
        touch-action: none; /* prevent touch drag from scrolling */
        color: #ccc;
    }
    lume-scene { position: absolute!important; top: 0; left: 0; }
    lume-scene:nth-child(2) { pointer-events: none; }
    lume-node { padding: 15px; pointer-events: all; }
    label { padding-right: 10px; }
</style>

<lume-scene id="scene" webgl>
    <lume-perspective-camera id="cam" active position="0 0 1000"></lume-perspective-camera>
    <lume-ambient-light intensity="0.3"></lume-ambient-light>
    <lume-point-light
        id="light"
        color="white"
        position="300 300 300"
        size="0 0 0"
        cast-shadow="true"
        intensity="0.8"
        align="-0.5 -0.5" FIXME-this-needed-while-using-custom-camera
    >
        <lume-mesh has="sphere-geometry basic-material" cast-shadow="false" size="10" mount-point="0.5 0.5" color="#eee"></lume-mesh>
    </lume-point-light>
    <!-- Specify a color otherwise the material will be tinted deeppink by default -->
    <lume-mesh id="model"
        has="box-geometry phong-material"
        rotation="40 40 0"
        Xalign="0.5 0.5 0.5" FIXME-this-is-disabled-while-using-custom-camera
        mount-point="0.5 0.5 0.5"
        size="100 100 100"
        color="white"
        texture="${location.origin+location.pathname}/textures/cement.jpg"
    >
    </lume-mesh>
</lume-scene>

<lume-scene id="scene2">
    <lume-node size-mode="proportional literal" size="1 80">
        <!-- FIXME When toggling these too fast, the toggling breaks. Three.js Loader problem? -->
        <label>
            Field of view <code id="fovValue">(50)</code>:
            <input id="fov" type="range" min="1" max="75" value="50">
        </label><br />
        <label>
            Camera element active:
            <input id="active" type="checkbox" checked>
        </label>
    </lume-node>
</lume-scene>

<script>
    // defines the default names for the HTML elements
    LUME.useDefaultNames()

    const light = document.querySelector('#light')

    document.addEventListener('pointermove', event => {
        event.preventDefault()
        light.position.x = event.clientX
        light.position.y = event.clientY
    })<commit_msg>update perspective-camera example<commit_after># perspective-camera

<div id="example"></div>
<script type="application/javascript">
  new Vue({
    el: '#example',
    template: '<live-code class="full" :template="code" mode="html>iframe" :debounce="200" />',
    data: {
      code:
`
<body touch-action="none">

<script src="${location.origin+location.pathname}/global.js"><\/script>
<!-- pep.js provides the pointer events (pointermove, pointerdown, etc) -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"><\/script>

<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #191919;
        touch-action: none; /* prevent touch drag from scrolling */
        color: #ccc;
    }
    lume-scene { position: absolute!important; top: 0; left: 0; }
    lume-scene:nth-child(2) { pointer-events: none; }
    lume-node { padding: 15px; pointer-events: all; }
    label { padding-right: 10px; }
</style>

<lume-scene id="scene" webgl perspective="800">
    <!-- This node visualizes the size of the default viewing area. -->
    <lume-node size-mode="proportional proportional" size="1 1" style="border: 5px solid royalblue;"></lume-node>
    <lume-perspective-camera id="cam" position="0 0 1000" align="0.5 0.5"></lume-perspective-camera>
    <lume-ambient-light intensity="0.3"></lume-ambient-light>
    <lume-point-light
        id="light"
        color="white"
        cast-shadow="true"
        intensity="0.8"
        position="0 0 300"
    >
        <lume-mesh has="sphere-geometry basic-material" cast-shadow="false" size="10 10 10" mount-point="0.5 0.5" color="#eee"></lume-mesh>
    </lume-point-light>
    <!-- Specify a color otherwise the material will be tinted deeppink by default -->
    <lume-mesh id="model"
        has="box-geometry phong-material"
        rotation="40 40 0"
        align="0.5 0.5 0.5"
        mount-point="0.5 0.5 0.5"
        size="100 100 100"
        color="white"
        texture="${location.origin+location.pathname}/textures/cement.jpg"
    >
    </lume-mesh>

</lume-scene>

<lume-scene id="scene2">
    <lume-node size-mode="proportional literal" size="1 80">
        <!-- FIXME When toggling these too fast, the toggling breaks. Three.js Loader problem? -->
        <label>
            Field of view <code id="fovValue">(50)</code>:
            <input id="fov" type="range" min="1" max="75" value="50">
        </label><br />
        <label>
            Camera element active:
            <input id="active" type="checkbox">
        </label>
    </lume-node>
</lume-scene>

<script>
    // defines the default names for the HTML elements
    LUME.useDefaultNames()

    const light = document.querySelector('#light')

    document.addEventListener('pointermove', event => {
        event.preventDefault()
        light.position.x = event.clientX
        light.position.y = event.clientY
    })
{'fraction_non_alphanumeric': 0.1630716134598792, 'fraction_numerical': 0.03364969801553063, 'mean_word_length': 2.6776649746192893, 'pattern_counts': {'":': 0, '<': 86, '<?xml version=': 0, '>': 90, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3101031', 'n_tokens_mistral': 1986, 'n_tokens_neox': 1862, 'n_words': 427}