<commit_before><!DOCTYPE html>
<html>

<head>

    <!-- using Bootstrap for styling -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <!-- ThreeJS r71 -->
    <script src="js/three.js"></script>

    <!-- OrbitControls is used for scene navigation -->
    <script src="js/OrbitControls.js"></script>

    <!-- jQuery is needed for tutorials about user interaction -->
    <script src="js/jquery-2.1.4.min.js"></script>

    <!-- ColladaLoader is needed for external models loading -->
    <script src="js/ColladaLoader.js"></script>

    <!-- custom stylesheed -->
    <link rel="stylesheet" href="css/style.css"/>

</head>

<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h2 class="panel-title"><a href="http://3DWeb.cc">3DWeb</a> WebGL Workshop</h2>
    </div>
</div>
<div id="theContainer"></div>
</body>

<script type="text/javascript">

    /**
     * WebGL workshop scene template - www.3dweb.cc
     *
     * Instructions:
     * - you need a WebGL enabled browser (check it on http://get.webgl.org)
     * - if you load assets (textures, models...) you need also a local webserver (see tutorials)
     */

    // put the variables you want to access from the console here
    var container, renderer, scene, camera, materials = {};

    (function() {

        // boilerplate
        container = document.getElementById('theContainer');

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xaabbff);
        renderer.setSize(640, 480);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(50, 640 / 480, 0.1, 8000);
        camera.position.set(0, 0, 40);

        container.appendChild(renderer.domElement);

        // warmer light from upper right
        var theLight1 = new THREE.DirectionalLight(0xffdddd, 1);
        theLight1.position.set(10, 10, 20);
        scene.add(theLight1);

        // colder light from upper left
        var theLight2 = new THREE.DirectionalLight(0xddddff, 0.7);
        theLight2.position.set(10, 10, -20);
        scene.add(theLight2);
        
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        var cubeGeometry = new THREE.BoxGeometry(6,6,6);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffaaaa
        });
        var highLightMaterial = new THREE.MeshPhongMaterial({
           color: 0x66ff66,
           opacity: 0.5,
           transparency: true
        });

        var intersectables = [];
        var cube, k = -6;
        while (k++ < 6) {
            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.name = 'cube_' + k;
            if (k%2) {
                cube.position.set(
                        8 * k,
                        Math.round(Math.random() * 10),
                        Math.round(Math.random() * 10));
            } else {
                cube.position.set(
                        8 * k,
                        -Math.round(Math.random() * 10),
                        -Math.round(Math.random() * 10));
            }
            scene.add(cube);
            intersectables.push(cube);
        }

        var mousePosition = new THREE.Vector2();
        var rayCaster = new THREE.Raycaster();
        var currentSelection, lastSelection;

        $(container).on('mousemove', function(event) {
            var offset = $(container).offset();
            var localX = event.pageX - offset.left;
            var localY = event.pageY - offset.top;

            var canvasX = ((localX / renderer.domElement.width) * 2) - 1;
            var canvasY = ((1 - (localY / renderer.domElement.height)) * 2) - 1;

            rayCaster.setFromCamera(
                    new THREE.Vector2(canvasX, canvasY), camera);

            var intersections = rayCaster.intersectObjects(intersectables);

            var firstObject = intersections[0];

            if (firstObject !== undefined) {
                console.log(firstObject.object.name);
                currentSelection = firstObject.object;
                currentSelection.material = highLightMaterial;
            } else {
                currentSelection.material = cubeMaterial;
            }

        });

        function animate() {
            renderer.render(scene, camera);
            requestAnimationFrame(animate);<commit_msg>tutorial 20 done<commit_after><!DOCTYPE html>
<html>

<head>

    <!-- using Bootstrap for styling -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <!-- ThreeJS r71 -->
    <script src="js/three.js"></script>

    <!-- OrbitControls is used for scene navigation -->
    <script src="js/OrbitControls.js"></script>

    <!-- jQuery is needed for tutorials about user interaction -->
    <script src="js/jquery-2.1.4.min.js"></script>

    <!-- ColladaLoader is needed for external models loading -->
    <script src="js/ColladaLoader.js"></script>

    <!-- custom stylesheed -->
    <link rel="stylesheet" href="css/style.css"/>

</head>

<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h2 class="panel-title"><a href="http://3DWeb.cc">3DWeb</a> WebGL Workshop</h2>
    </div>
</div>
<div id="theContainer"></div>
</body>

<script type="text/javascript">

    /**
     * WebGL workshop scene template - www.3dweb.cc
     *
     * Instructions:
     * - you need a WebGL enabled browser (check it on http://get.webgl.org)
     * - if you load assets (textures, models...) you need also a local webserver (see tutorials)
     */

    // put the variables you want to access from the console here
    var container, renderer, scene, camera, materials = {};

    (function() {

        // boilerplate
        container = document.getElementById('theContainer');

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xaabbff);
        renderer.setSize(640, 480);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(50, 640 / 480, 0.1, 8000);
        camera.position.set(0, 0, 40);

        container.appendChild(renderer.domElement);

        // warmer light from upper right
        var theLight1 = new THREE.DirectionalLight(0xffdddd, 1);
        theLight1.position.set(10, 10, 20);
        scene.add(theLight1);

        // colder light from upper left
        var theLight2 = new THREE.DirectionalLight(0xddddff, 0.7);
        theLight2.position.set(10, 10, -20);
        scene.add(theLight2);
        
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        var cubeGeometry = new THREE.BoxGeometry(6,6,6);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffaaaa
        });
        var highLightMaterial = new THREE.MeshPhongMaterial({
           color: 0x66ff66,
           opacity: 0.5,
           transparency: true
        });

        var intersectables = [];
        var cube, k = -6;
        while (k++ < 6) {
            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.name = 'cube_' + k;
            if (k%2) {
                cube.position.set(
                        8 * k,
                        Math.round(Math.random() * 10),
                        Math.round(Math.random() * 10));
            } else {
                cube.position.set(
                        8 * k,
                        -Math.round(Math.random() * 10),
                        -Math.round(Math.random() * 10));
            }
            scene.add(cube);
            intersectables.push(cube);
        }

        var mousePosition = new THREE.Vector2();
        var rayCaster = new THREE.Raycaster();
        var currentSelection, lastSelection;

        $(container).on('mousemove', function(event) {
            var offset = $(container).offset();
            var localX = event.pageX - offset.left;
            var localY = event.pageY - offset.top;

            var canvasX = ((localX / renderer.domElement.width) * 2) - 1;
            var canvasY = ((1 - (localY / renderer.domElement.height)) * 2) - 1;

            rayCaster.setFromCamera(
                    new THREE.Vector2(canvasX, canvasY), camera);

            var intersections = rayCaster.intersectObjects(intersectables);

            var firstObject = intersections[0];

            if (firstObject !== undefined) {
                console.log(firstObject.object.name);
                currentSelection = firstObject.object;
                currentSelection.material = highLightMaterial;
            } else {
                if (currentSelection !== undefined) {
                    currentSelection.material = cubeMaterial;
                }
            }

        });

        function animate() {
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
{'fraction_non_alphanumeric': 0.1283452909691379, 'fraction_numerical': 0.020726568727935313, 'mean_word_length': 1.8935749588138386, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, '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': '3078023', 'n_tokens_mistral': 2660, 'n_tokens_neox': 2404, 'n_words': 580}