0

Есть плагин на Revit https://github.com/va3c/RvtVa3c. также есть сам Viewer https://github.com/McCulloughRT/Rvt3js Пока тестирую на локальном компьютере используя live server на Visual Studio Code, для сборки и проверки. Возник вопрос: Экспортируя модель в json, а именно file.rvt.js, приходится класть модель в папку с Viewer/js/models/file.rvt.js И он загружается скриптом в index/html viewer

/* LOAD AND SMOOTH MESH */
                oLoad = new THREE.ObjectLoader();
                oLoad.load('js/models/file.rvt.js', function ( object ) {
                    scene = object;
                    scene.children.forEach(function(obj3d){
                        if (obj3d instanceof THREE.Object3D) {
                            obj3d.children.forEach(function(mesh){
                                if(mesh instanceof THREE.Mesh) {
                                    if (mesh.name.indexOf('TopographySurface') != -1){
                                        console.log('got a topo');
                                        var finalGeo = mesh.geometry;
                                        finalGeo.mergeVertices();
                                        var modifier = new THREE.SubdivisionModifier(subdivs);
                                        modifier.modify(finalGeo);
                                    }
                                }
                            })
                        };
                    });

                    /* CREATE SKYBOX */
                    var urlPrefix = '/img/sky/',
                        urls = [
                          urlPrefix + 'posx.jpg',
                          urlPrefix + 'negx.jpg',
                          urlPrefix + 'negz.jpg',
                          urlPrefix + 'posz.jpg',
                          urlPrefix + 'posy.jpg',
                          urlPrefix + 'negy.jpg'
                        ],
                        textureCube = THREE.ImageUtils.loadTextureCube(urls),
                        shader = THREE.ShaderLib['cube'],
                        uniforms = THREE.UniformsUtils.clone(shader.uniforms);
                        uniforms['tCube'].value = textureCube;
                  var skyMaterial = new THREE.ShaderMaterial({
                      fragmentShader: shader.fragmentShader,
                      vertexShader: shader.vertexShader,
                      uniforms: uniforms,
                      depthWrite: false,
                      side: THREE.DoubleSide
                }),
                skyboxMesh = new THREE.Mesh(new THREE.BoxGeometry(100000000, 100000000, 100000000, 1, 1, 1), skyMaterial);
                scene.add(skyboxMesh);

                    /* CREATE LIGHTS */
                    ambient = new THREE.AmbientLight( 0x404040 );
                        scene.add( ambient);
                    directional = new THREE.DirectionalLight( 0xffffff, 1 );
                        directional.position.set(0,1,0);
                        directional.castShadow = true;
                        directional.shadowMapWidth = 4096;
                        directional.shadowMapHeight = 4096;
                        var d = 10000;
                        directional.shadowCameraLeft = -d;
                        directional.shadowCameraRight = d;
                        directional.shadowCameraTop = d * 2;
                        directional.shadowCameraBottom = -d * 2;
                        directional.shadowCameraNear = 1000;
                        directional.shadowCameraFar = 20000;
                        scene.add(directional);

                    /* FINAL FUNCTIONS BEFORE RENDER */
                    computeNormalsAndFaces();
                    THREEx.WindowResize(renderer, camera);
                    console.log('load complete!');

              $('#introContainer').fadeOut("slow", function(){
                        render()
                $('#mainContainer').fadeIn("slow",function(){});
              });
                // END ONLOAD CALLBACK
                });

Как можно сделать так, чтобы это происходило, посредством выбора модели в <input type "file" class="inputFile"> Форма кнопки появляется, а вот функционал не работает. Как выполнить открытие файла и передачу его в oLoad.load('js/models/file.rvt.js', function ( object ) Вместо 'js/models/file.rvt.js'. Подскажите пожалуйста люди добрые, по возможности простым языком, т.к. в js полный ноль. Заранее спасибо.

P.S. изменил немного:

<html>
    <head>
        <meta charset=utf-8>
        <title>Rvt3js</title>
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
        <style>
                body {
                    margin: 0;
                    overflow: hidden;
        
                    font-family: 'Open Sans', sans-serif;
                        font-weight: 300;
                    line-height: 1.5;
                        letter-spacing: -0.004em;
                }
                canvas { width: 90%; height: 90% }
        
                #introContainer {
        
                }
                #loadtext {
                    font-family: 'Merriweather', serif;
                        font-weight: 300;
                        font-size: 18px;
                        line-height: 1.5;
                        letter-spacing: -0.004em;
                        color: rgba(0,0,0,0.8);
                        text-align: center;
        
                        position: fixed;
                        width: 100%;
                        top: 68%;
                        z-index: 1000;
                }
                #mainContainer {
        
                }
        
                .menuR {
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    width: 185px;
                }
        
                .menuL {
                    position: fixed;
                    bottom: 20px;
                    left: 20px;
                    width: 140px;
                }
        
                .button {
                    display: inline-block;
                    padding: 8px;
                    color: #FFF;
                    background-color: #555;
                    width: 123px;
                    margin-top: 8px;
                }
        
                .button.active {
                    background-color: rgb(18, 36, 70);
                }
        
                .button:hover {
                    cursor: pointer;
                    background-color: rgb(18, 36, 70);
                }
        
                .button.error {
                    pointer-events: none;
                    background-color: red;
                }
                .section-button {
                    position: relative;
                }
                .section-dropdown {
                        position: absolute;
                        display: none;
                        background-color: rgb(110, 136, 184);
                        left: calc(100% + 10px);
                        top: 0px;
                        padding: 8px;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                        border: 1px solid black;
                        padding: 2px;   
                }
                .section-item {
                            /* Остальные свойства */
                            margin-bottom: 2px;
                    }
                .section-dropdown.active {
                        display: block;
                }
        
                .panel {
                        position: fixed;
                        bottom: 10px;
                        left: calc(50% - 100px);
                        width: 200px;
                        background-color: #f2f2f2;
                        border-radius: 5px;
                        padding: 5px;
                        text-align: center;
                }
        
                .style-button {
                        position: relative;
                }
        
                .style-dropdown {
                    position: absolute;
                    display: none;
                    background-color: rgb(110, 184, 136);
                    top: auto;
                    left: 0;
                    bottom: 100%;
                    padding: 8px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    border: 1px solid black;
                }
        
                .style-item {
                            /* Остальные свойства */
                            margin-bottom: 2px;
                    }
        
                    .style-dropdown.active {
                        display: block;
                }
            </style>
        </head>
        <body>
            <input class="input" type="file">
            <div id="introContainer">
                <div id="loadtext">Loading...</div>
            </div>
            <div id="mainContainer" hidden>
                <div class="menuL">
                    <div class="button description-event active">Вкл/Выкл Отображения свойств</div>
                    <div class="button section-button">Сечения
                        <div class="section-dropdown">
                            <div class="section-item" data-axis="X">X</div>
                            <div class="section-item" data-axis="Y">Y</div>
                            <div class="section-item" data-axis="Z">Z</div>
                        </div>
                    </div>
                    <div class="button style-button">Изменить стиль
                        <div class="style-dropdown">
                            <div class="style-item" data-style="Frame">Каркас</div>
                            <div class="style-item" data-style="Implicit">Скрытый</div>
                            <div class="style-item" data-style="Original">Оригинал</div>
                        </div>
                    </div>
                </div>
                <div class="menuR">
                    <div class="button mouse-ctrl">Mouse Controls</div>
                    <div class="button leap-ctrl">Leap Grab</div>
                    <div class="button leapP-ctrl">Leap Point</div>
                    <div class="button vr">VR Display</div>
                </div>
                <div style='background-color: rgb(165, 189, 202); left: 20px; opacity: 0.85; position: absolute; top: 20px;'>
                    <div id=msg style=font-size:10pt;padding:8px; ></div>
                </div>
                <div id="container"></div>
            </div>
        
        <script src="js/leap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
        <script src="js/controls/LeapTwoHandControls.js"></script>
        <script src="js/controls/LeapPointerControls.js"></script>
        <script src="js/controls/OrbitControls.js"></script>
        <script src="js/SubdivisionModifier.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/Projector.js"></script>
        <script src="js/Detector.js"></script>
        <script src='js/showAtt.js'></script>
        <script src='js/THREEx.WindowResize.js'></script>
        <script>
            alert("ЛКМ - вращение, ПКМ - перемещение, колёсико - приближение/отдаление ");
        </script>
        <script>
                // Функция для обработки кликов на кнопке сечений
                function sectionButtonClick() {
                    var dropdown = document.querySelector('.section-dropdown');
                    if (dropdown.classList.contains('active')) {
                        dropdown.classList.remove('active');
                    } else {
                        dropdown.classList.add('active');
                    }
                }
        
                // Добавляем обработчик кликов на кнопку сечений
                var sectionButton = document.querySelector('.section-button');
                sectionButton.addEventListener('click', sectionButtonClick);
        
                // Добавляем обработчики кликов на элементы выпадающего списка сечений
                var sectionItems = document.querySelectorAll('.section-item');
                sectionItems.forEach(function(item) {
                    item.addEventListener('click', function() {
                        var axis = item.getAttribute('data-axis');
                        // Здесь добавляем код для создания плоскости по указанной оси и обработки подрезки модели
                        
                        var sectionItems = document.getElementsByClassName("section-item");
                        

                        for (var i = 0; i < sectionItems.length; i++) {
                            sectionItems[i].addEventListener("click", function(event) {
                                var axis = event.target.getAttribute("data-axis");

                                if (axis === "X") {
                                    // создать полупрозрачную плоскость на оси X
                                    // обработка перемещения плоскости на оси X
                                    // отсечение всего, что находится за границами плоскости по оси X
                                } else if (axis === "Y") {
                                    // создать полупрозрачную плоскость на оси Y
                                    // обработка перемещения плоскости на оси Y
                                    // отсечение всего, что находится за границами плоскости по оси Y
                                } else if (axis === "Z") {
                                    // создать полупрозрачную плоскость на оси Z
                                    // обработка перемещения плоскости на оси Z
                                    // отсечение всего, что находится за границами плоскости по оси Z
                                }
                            });
                        }
                        console.log('Создание плоскости по оси ' + axis);
                    });
                });
        
                // Функция для обработки кликов на кнопке изменения стиля
                function styleButtonClick() {
                    var dropdown = document.querySelector('.style-dropdown');
                    if (dropdown.classList.contains('active')) {
                        dropdown.classList.remove('active');
                    } else {
                        dropdown.classList.add('active');
                    }
                }
        
                // Добавляем обработчик кликов на кнопку изменения стиля
                var styleButton = document.querySelector('.style-button');
                styleButton.addEventListener('click', styleButtonClick);
        
                // Добавляем обработчики кликов на элементы выпадающего списка стилей
                var styleItems = document.querySelectorAll('.style-item');
                styleItems.forEach(function(item) {
                    item.addEventListener('click', function() {
                        var style = item.getAttribute('data-style');
                        // Здесь добавляем код для изменения стиля модели в соответствии с выбранным стилем
                        console.log('Изменение стиля на ' + style);
                    });
                });
            </script>
        <script>
        /* LOADING ANIMATION */
            var idR;
        var i_scene = new THREE.Scene();
        var i_aspect = window.innerWidth / window.innerHeight;
        var i_camera = new THREE.PerspectiveCamera(75, i_aspect, 0.1, 100);
        var i_renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        i_renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("introContainer").appendChild(i_renderer.domElement);

        var i_geometry = new THREE.BoxGeometry(1,1,1);
        var i_material = new THREE.MeshNormalMaterial();
        var i_cube = new THREE.Mesh(i_geometry, i_material);
        i_scene.add(i_cube);
        i_camera.position.z = 5;

        var i_render = function () {
          idR = requestAnimationFrame(i_render);
          i_cube.rotation.x += 0.03;
          i_cube.rotation.y += 0.03;
          i_renderer.render(i_scene, i_camera);
        };
        i_render();
      </script>

        <script>
            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
            var animLoop = false;
            var idM;
            var container, camera, scene, renderer;
            var controller, controls;
            var oLoad;
            var ambient, directional;
            var subdivs = 0;
            var stats;
            var projector;

            var clkBtn = document.querySelector( '.description-event' );
            var mouseBtn = document.querySelector( '.mouse-ctrl' );
            var grabBtn = document.querySelector( '.leap-ctrl' );
            var pntBtn = document.querySelector( '.leapP-ctrl' );
            var vrBtn = document.querySelector( '.vr' );
            

            mouseBtn.onclick = function(){mouse();};
            grabBtn.onclick = function(){twoHand();};
            pntBtn.onclick = function(){pointer();};
            vrBtn.onclick = function(){window.location = "threeVR.html";}
            clkBtn.onclick = function(){
                if ($('.description-event').hasClass('active')){
                    $('.description-event').removeClass('active');
                    removeInfoListener();
                } else {
                    $('.description-event').addClass('active');
                    addInfoListener();
                }
            };

            init();
            //animate();

            function init() {
                /* INITILZE THREE VARIABLES */
                controller = new Leap.Controller();
                scene = new THREE.Scene();
                projector = new  THREE.Projector();

                /* CREATE RENDERER */
                renderer = new THREE.WebGLRenderer( { antialias: true, alpha:  true } );
          renderer.setSize(window.innerWidth, window.innerHeight);
                container = document.getElementById( 'container' );
                container.appendChild( renderer.domElement );

                /* CREATE CAMERA */
                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 500000000);
                camera.position.set(15000,15000,15000);

                // /* CREATE STATS OBJECT */
                // stats = new Stats();
                // stats.domElement.style.position = 'absolute';
                // stats.domElement.style.top = '10px';
                // stats.domElement.style.left = '10px';
                // stats.domElement.style.zIndex = 100;
                // container.appendChild( stats.domElement );

                /* SET DEFAULT CONTROL TYPE */
                mouse();
                
                input.onchange = e => { 

                    // getting a hold of the file reference
                    var file = e.target.files[0]; 
                    
                    
                    /* LOAD AND SMOOTH MESH */
                oLoad = new THREE.ObjectLoader();
                oLoad.load(file, function ( object ) {
                    scene = object;
                    scene.children.forEach(function(obj3d){
                        if (obj3d instanceof THREE.Object3D) {
                            obj3d.children.forEach(function(mesh){
                                if(mesh instanceof THREE.Mesh) {
                                    if (mesh.name.indexOf('TopographySurface') != -1){
                                        console.log('got a topo');
                                        var finalGeo = mesh.geometry;
                                        finalGeo.mergeVertices();
                                        var modifier = new THREE.SubdivisionModifier(subdivs);
                                        modifier.modify(finalGeo);
                                    }
                                }
                            })
                        };
                    });

                    /* CREATE SKYBOX */
                    var urlPrefix = '/img/sky/',
                        urls = [
                          urlPrefix + 'posx.jpg',
                          urlPrefix + 'negx.jpg',
                          urlPrefix + 'negz.jpg',
                          urlPrefix + 'posz.jpg',
                          urlPrefix + 'posy.jpg',
                          urlPrefix + 'negy.jpg'
                        ],
                        textureCube = THREE.ImageUtils.loadTextureCube(urls),
                        shader = THREE.ShaderLib['cube'],
                        uniforms = THREE.UniformsUtils.clone(shader.uniforms);
                        uniforms['tCube'].value = textureCube;
                  var skyMaterial = new THREE.ShaderMaterial({
                      fragmentShader: shader.fragmentShader,
                      vertexShader: shader.vertexShader,
                      uniforms: uniforms,
                      depthWrite: false,
                      side: THREE.DoubleSide
                }),
                skyboxMesh = new THREE.Mesh(new THREE.BoxGeometry(100000000, 100000000, 100000000, 1, 1, 1), skyMaterial);
                scene.add(skyboxMesh);

                    /* CREATE LIGHTS */
                    ambient = new THREE.AmbientLight( 0x404040 );
                        scene.add( ambient);
                    directional = new THREE.DirectionalLight( 0xffffff, 1 );
                        directional.position.set(0,1,0);
                        directional.castShadow = true;
                        directional.shadowMapWidth = 4096;
                        directional.shadowMapHeight = 4096;
                        var d = 10000;
                        directional.shadowCameraLeft = -d;
                        directional.shadowCameraRight = d;
                        directional.shadowCameraTop = d * 2;
                        directional.shadowCameraBottom = -d * 2;
                        directional.shadowCameraNear = 1000;
                        directional.shadowCameraFar = 20000;
                        scene.add(directional);

                    /* FINAL FUNCTIONS BEFORE RENDER */
                    computeNormalsAndFaces();
                    THREEx.WindowResize(renderer, camera);
                    console.log('load complete!');

                        $('#introContainer').fadeOut("slow", function(){
                                render()
                            $('#mainContainer').fadeIn("slow",function(){});
                        });
                    // END ONLOAD CALLBACK
                    });
                }

                
                
                

                controller.connect(function(){console.log('connected!');});
                controls.addEventListener( 'change', function(){
                    if(animLoop == false) {render();}
                } );
                addInfoListener();
            }

            /* ANIMATE DEPRECATED ON STATIC SCENE */
      function animate(){
                idM = requestAnimationFrame( animate );
                controls.update();
                //stats.update();
                render();
      }

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

            function removeInfoListener(){
                document.removeEventListener( 'click', clickHandler, false );
            }

            function addInfoListener(){
                document.addEventListener( 'click', clickHandler, false );
            }

            function pointer(){
                controls = new THREE.LeapPointerControls(camera, controller);
                    controls.size = 20000;
                    controls.speed = .03;
                    controls.dampening = .99;
                    controls.target = new THREE.Vector3(0,0,);
            }

            function twoHand(){

                controls = new THREE.LeapTwoHandControls( camera, controller );
                    controls.translationSpeed = 180;
                    controls.rotationSpeed = 3;
                    controls.pinchThreshold = 0.9;
                    controls.transSmoothing = 1000;
                    controls.rotationSmoothing = 1;
                animLoop = true;
                animate();
            }

            function mouse() {
                if (animLoop == true){stopAnim(idM);}
                animLoop = false;
                controls = new THREE.OrbitControls( camera, renderer.domElement );
                    controls.enableDamping = true;
                    controls.dampingFactor = .55;
                    controls.enableZoom = true;
            }

            function stopAnim(renderTarget){
          cancelAnimationFrame(renderTarget);
        }

        </script>
    </body>
</html>

теперь окно выбора открывается, но сама загрузка модели не происходит. выдаёт ошибку:

index.html:345 Uncaught ReferenceError: input is not defined
    at init (index.html:345:5)
    at index.html:315:4
init @ index.html:345
(анонимная) @ index.html:315

Пробовал

var input = document.querySelector('.input');
input.addEventListener('change', function(e) {
  var file = e.target.files[0];
  loadFile(file);
});

function loadFile(file) {
  var reader = new FileReader();

  reader.onload = function(e) {
    var contents = e.target.result;
    var loader = new THREE.ObjectLoader();
    var object = loader.parse(JSON.parse(contents));
    scene = object;

    // Rest of the code for setting up the scene and rendering
    // ...
  };

  reader.readAsText(file);
}

Но снова перестаёт работать окно выбора файла

0

1 ответ 1

0

<button id="loadButton">Выбрать файл</button>

loadButton.addEventListener('click', function() {
                var input = document.createElement('input');
                input.type = 'file';

                input.onchange = function(event) {
                    var file = event.target.files[0];
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        var contents = event.target.result;

                        oLoad = new THREE.ObjectLoader();
                        oLoad.parse(JSON.parse(contents), function(object) {
                            scene = object;
                            scene.children.forEach(function(obj3d) {
                                if (obj3d instanceof THREE.Object3D) {
                                    obj3d.children.forEach(function(mesh) {
                                        if (mesh instanceof THREE.Mesh) {
                                            if (mesh.name.indexOf('TopographySurface') != -1) {
                                                console.log('got a topo');
                                                var finalGeo = mesh.geometry;
                                                finalGeo.mergeVertices();
                                                var modifier = new THREE.SubdivisionModifier(subdivs);
                                                modifier.modify(finalGeo);
                                            }
                                        }
                                    })
                                };
                            });
    ```
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 29 июн. 2023 в 12:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.