Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demoFBX</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script type="module">

        import * as THREE from 'https://unpkg.com/three@0.115.0/build/three.module.js';
        import { OrbitControls } from 'https://unpkg.com/three@0.115.0/examples/jsm/controls/OrbitControls.js';
        import { FBXLoader } from 'https://unpkg.com/three@0.115.0/examples/jsm/loaders/FBXLoader.js';

        var scene, camera, controls, raycaster, mouse, renderer, materials;

        init();
        animate();

        function init() {

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
            camera.position.z = 400;

            {
                var skyColor = 0xB1E1FF;  // light blue
                var groundColor = 0xB97A20;  // brownish orange
                var intensity = 1;
                var light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
                scene.add(light);
            }

            {
                var color = 0xFFFFFF;
                var intensity = 1;
                var light = new THREE.DirectionalLight(color, intensity);
                light.position.set(5, 10, 2);
                scene.add(light);
                scene.add(light.target);
            }

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            controls = new OrbitControls(camera, renderer.domElement);
            raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();

            var texture = new THREE.TextureLoader();

            materials = [
                new THREE.MeshBasicMaterial({ map: texture.load('/models/fbx/textureFBX.png') }),
                new THREE.MeshBasicMaterial({ map: texture.load('/models/fbx/texture0.png') }),
                new THREE.MeshBasicMaterial({ map: texture.load('/models/fbx/texture1.png') }),
                new THREE.MeshBasicMaterial({ map: texture.load('/models/fbx/texture2.png') })
            ];

            var fbxLoader = new FBXLoader();
            fbxLoader.load('/models/fbx/cube.fbx', function (object) {

                object.traverse(function (child) {
                    if (child.isMesh) {
                        child.material = materials[0];
                    }
                });

                scene.add(object);
            });

            window.addEventListener('click', onClick, false);
            window.addEventListener('resize', onWindowResize, false);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function onClick() {
            event.preventDefault();

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            var intersects = raycaster.intersectObjects(scene.children, true);

            if (intersects.length > 0) {

                const position = intersects[0].object.geometry.attributes.position;
                const vector = new THREE.Vector3();
                const face = intersects[0].face;

                var geometry = new THREE.Geometry();

                for (let i = 0, l = position.count; i < l; i++) {

                    vector.fromBufferAttribute(position, i);
                    vector.applyMatrix4(intersects[0].object.matrixWorld);
                    //console.log( vector );
                    if (i === face.a || i === face.b || i === face.c) {
                        geometry.vertices.push(vector.clone());
                    }
                }


                console.log(geometry);
                geometry.faces = [new THREE.Face3(0, 1, 2)];


                console.log(geometry.vertices);
                console.log(geometry.faces);
                console.log(geometry.boundingSphere);

                geometry.faceVertexUvs[0].push([
                    new THREE.Vector2(0, 0),
                    new THREE.Vector2(0.5, 0),
                    new THREE.Vector2(0.5, 0.5)
                ]);

                //updating the uvs
                geometry.uvsNeedUpdate = true;
                geometry.computeBoundingSphere();
                geometry.computeVertexNormals();
                geometry.computeFaceNormals();
                var materialTemp = new THREE.MeshBasicMaterial({ map: materials[0] });

                var mesh = new THREE.Mesh(geometry, materialTemp);
                scene.add(mesh);
            }
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

    </script>
</body>

</html>