Есть плагин на 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);
}
Но снова перестаёт работать окно выбора файла