Javascript-форум - Отловить ошибки в 3Д модели

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Отловить ошибки в 3Д модели (https://javascript.ru/forum/misc/79015-otlovit-oshibki-v-3d-modeli.html)

<!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(); два раза вызвать

Цитата:

Сообщение от MallSerg (Сообщение 516902)

в 48й render(); два раза вызвать

Повтор строки render(); не помогает.
Диван исправил

Новый адрес модели

Сделал 2 куба один покрасил просто цветом, второй окрасил текстурой таких же кирпичей, их перевел в .kmz. Первый куб сразу цвет видно, а на втором видно текстуру, когда мышкой сделаешь движение, например небольшой поворот.

Потому что нет освещения.
Освещение появляется только когда двинешь камерой

light.position.set( camera.position.x, camera.position.y ,camera.position.z );

У камеры нет позиции пока ее не передвинешь.
Следовательно свет устанавливается на позицию камеры (в никуда).
Сделай свет заранее.
А лучше с помощью отладчика посмотри как сделан свет на других three js сценах и сделай так же.

просто ставишь точку остоновки на render и смотришь что лежит в scene там массив со всеми камерами источниками света и все меши в мешах можешь посмотреть какие у них материалы.

1. Вот другое расширение .OBJ при экспорте, так получилось. Хорошо смотрится, только в центр нужно сместить и повернуть, чтоб 2 стороны было видно.

2.

Цитата:

Сообщение от MallSerg (Сообщение 516964)

Сделай свет заранее.

Трудно пока, только изучаю, помогите вот последний код:

<!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>