Отловить ошибки в 3Д модели
Вложений: 1
Есть страница
Просмотр беседки в 3D на компьютере просматриваем 3D модель все нормально смотрится. На сотовом в Сафари перегружается страница, часто. Не знаю куда уже обращаться, на скриптах сделан код. Сегодня смотрю Яндекс метрику Вебвизор, посетитель сайта зашел на страницу по хорошему ключевому запросу. А страница подвисла... Код 3Д модели прикрепляю. |
THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( light.shadow ) instead. set @ three.min.js:313
three.min.js:695 THREE.ImageUtils.loadTexture is being deprecated. Use THREE.TextureLoader() instead. loadTexture @ three.min.js:695 Используются удаленные и устаревшие функции в three.min.js three.min.js:600 THREE.WebGLRenderer: image is not power of two (256x187). Resized to 256x256 Используется версия OpenGL ES 2 а она требует чтобы размеры изображений для шейдеров были степенью двойки не все браузеры могут это исправлять автоматически. Ну и в целом не стоит пользователям старых телефонов показывать 3D модели на странице. |
Да, старая версия расширения
Version: T2H EXPORT WEBGL (0.9.6); December 25, 2015 подходит для SketchUp 2018 Телефон у меня iPhone 5s обновления все новые. По моему нет новее расширения для SketchUp, я обыскал уже весь инет. Как-то можно исправить такое? Закрывать просмотр 3D жалко. |
Если честно не до конца понимают зачем использовать расширение.
Скечап умеет экспортировать в обычные общепринятые форматы для обмена к примеру 3DS. Three.js из коробки умеет открывать общепринятые форматы тот же 3DS https://threejs.org/examples/#webgl_loader_3ds Чем вызвана необходимость использовать плагин который будет генерировать скрипты для отдельной страницы? Так автоматизация настроена? |
Нет автоматизации, я сам делаю сайт и хочу выкладывать модели из скетчап на сайт, чтоб все хранилось на своем хостинге без ссылок и логотипов, которые навязывают онлайн сервера типа 3dwarehouse.
Я сделал экспорт 3ds, а как прикрутить это на сайт не знаю, инструкцию бы найти или подскажете? |
Нажимаешь f12 и смотришь код страницы. https://threejs.org/examples/#webgl_loader_3ds
не так сложно найти место var loader = new TDSLoader( ); loader.load( 'models/3ds/portalgun/portalgun.3ds', function ( object ) { scene.add( object ); }); там несколько строк с очевидным кодом. |
Вложений: 1
Что-то не нашел такого кода по F12, дремучий лес...
Шлю все файлы в архиве 3ds, при экспорте из SketchUp, поможете воспроизвести? |
с 3Ds loader у three js совсем ужасный
Во что еще SketchUp экспорт может? FBX https://threejs.org/examples/webgl_loader_fbx.html KMZ https://threejs.org/examples/webgl_loader_kmz.html |
Вложений: 2
На картинки типы экспорта, и еще файл шлю экспорт в KMZ
Мне бы полный пример, как сделано |
|
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="main.css">
</head><body>
<script src="./jszip.min.js"></script>
<script type="module">
import * as THREE from './three.module.js';
import { OrbitControls } from './OrbitControls.js';
import { KMZLoader } from './KMZLoader.js';
var camera, scene, renderer;
var light;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
// var light = new THREE.DirectionalLight( 0xffffff );
light = new THREE.DirectionalLight( 0xffffff );
// light.position.set( -0.8, 0.2, -0.1 ).normalize();
scene.add( light );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.y = 5;
camera.position.z = 10;
scene.add( camera );
//var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
//scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new KMZLoader();
loader.load( './besedka-2019 lumen.kmz', function ( kmz ) {
kmz.scene.position.y = -2.0;
scene.add( kmz.scene );
render();
} );
var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
light.position.set( camera.position.x, camera.position.y ,camera.position.z );
renderer.render( scene, camera );
}
</script>
</body>
</html>
Ну и вдруг сам не найдешь библиотеки https://threejs.org/build/three.module.js https://threejs.org/examples/js/libs/jszip.min.js https://threejs.org/examples/jsm/loaders/KMZLoader.js https://threejs.org/examples/jsm/con...bitControls.js |
Все супер, но с сеткой мне больше нравится.
Сейчас такой код, в нем нужно выше беседку поднять, в ноль.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - KMZ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
</div>
<script src="js/libs/jszip.min.js"></script>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { KMZLoader } from './jsm/loaders/KMZLoader.js';
var camera, scene, renderer;
var light;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
// var light = new THREE.DirectionalLight( 0xffffff );
light = new THREE.DirectionalLight( 0xffffff );
// light.position.set( -0.8, 0.2, -0.1 ).normalize();
scene.add( light );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.y = 5;
camera.position.z = 10;
scene.add( camera );
var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new KMZLoader();
loader.load( './models/kmz/besedka-2019-lumen.kmz', function ( kmz ) {
kmz.scene.position.y = -2.0;
scene.add( kmz.scene );
render();
} );
var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
light.position.set( camera.position.x, camera.position.y ,camera.position.z );
renderer.render( scene, camera );
}
</script>
</body>
</html>
|
Не заметил пост выше.
За затемнение или высветление отвечает карта нормалей это такой вектор перпендикулярный плоскости отображаемого пиксела чем тупее угол к источнику освещения тем темнее пиксель. В сцене только один источник освещения поэтому такое затемнение на некоторых сторонах. также свойства у материалов влияют на высветление затемнение. можно добавить несколько источников света light = new THREE.DirectionalLight( 0xffffff , 0.3 ); должно сгладить неравномерное освещение. kmz.scene.position.y = -2.0; отвечает за высоту |
У дивана карта нормалей перевернута.
Так бывает если в редакторе рисовать из перевернутых полигонов. |
Диван был уголок справа, я вытянул его на левую сторону. Как исправить подумаю.
Теперь все устраивает, смещение сделал. Одна проблема, перегружаем страницу объект черный, пока не тронешь мышкой, нужно решить как-то... |
в 48й render(); два раза вызвать
|
Цитата:
Диван исправил Новый адрес модели |
Сделал 2 куба один покрасил просто цветом, второй окрасил текстурой таких же кирпичей, их перевел в .kmz. Первый куб сразу цвет видно, а на втором видно текстуру, когда мышкой сделаешь движение, например небольшой поворот.
|
Потому что нет освещения.
Освещение появляется только когда двинешь камерой light.position.set( camera.position.x, camera.position.y ,camera.position.z ); У камеры нет позиции пока ее не передвинешь. Следовательно свет устанавливается на позицию камеры (в никуда). Сделай свет заранее. А лучше с помощью отладчика посмотри как сделан свет на других three js сценах и сделай так же. просто ставишь точку остоновки на render и смотришь что лежит в scene там массив со всеми камерами источниками света и все меши в мешах можешь посмотреть какие у них материалы. |
1. Вот другое расширение .OBJ при экспорте, так получилось. Хорошо смотрится, только в центр нужно сместить и повернуть, чтоб 2 стороны было видно.
2. Цитата:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Беседка с хозблоком</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="jsm/main.css">
</head>
<body>
<script src="jsm/jszip.min.js"></script>
<script type="module">
import * as THREE from './build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { KMZLoader } from './jsm/loaders/KMZLoader.js';
var camera, scene, renderer;
var light;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
// var light = new THREE.DirectionalLight( 0xffffff );
light = new THREE.DirectionalLight( 0xffffff );
// light = new THREE.DirectionalLight( 0xffffff, 0.3 );
// light.position.set( -0.8, 0.2, -0.1 ).normalize();
scene.add( light );
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 5;
camera.position.z = 10;
camera.position.x = Math.cos(1) * -9;
camera.position.y = Math.cos(1) * 5;
scene.add( camera );
var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
scene.add( grid );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new KMZLoader();
loader.load( 'models/besedka-2019.kmz', function ( kmz ) {
kmz.scene.position.x = -3;
kmz.scene.position.z = 3;
kmz.scene.position.y = 0;
scene.add( kmz.scene );
render();
} );
var controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
light.position.set( camera.position.x, camera.position.y ,camera.position.z );
renderer.render( scene, camera );
}
</script>
</body>
</html>
|
Цитата:
Добавил setInterval и clearInterval
function render() {
light.position.set( camera.position.x, camera.position.y ,camera.position.z );
renderer.render( scene, camera );
// setInterval позволяет вызывать функцию регулярно, повторяя вызов через интервал времени
setInterval(render, 10);
// Отмена повторения действий, установленные вызовом функции setInterval()
clearInterval();
}
|
Вложений: 1
setInterval(render, 10);код выше вызывает проблемы на мобильных Вообщем сделал здесь, беседка Прикрепляю весь код моделирования, где экспорт был из SketchUp файл с расширением KMZ, думаю кому-то пригодится:) |
| Часовой пояс GMT +3, время: 12:09. |