06.12.2019, 20:03
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
<!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
Последний раз редактировалось MallSerg, 06.12.2019 в 20:06.
|
|
06.12.2019, 20:15
|
|
Аспирант
|
|
Регистрация: 18.10.2014
Сообщений: 35
|
|
Все супер, но с сеткой мне больше нравится.
Сейчас такой код, в нем нужно выше беседку поднять, в ноль.
<!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>
|
|
06.12.2019, 20:34
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
Не заметил пост выше.
За затемнение или высветление отвечает карта нормалей это такой вектор перпендикулярный плоскости отображаемого пиксела чем тупее угол к источнику освещения тем темнее пиксель.
В сцене только один источник освещения поэтому такое затемнение на некоторых сторонах.
также свойства у материалов влияют на высветление затемнение.
можно добавить несколько источников света
light = new THREE.DirectionalLight( 0xffffff , 0.3 );
должно сгладить неравномерное освещение.
kmz.scene.position.y = -2.0; отвечает за высоту
|
|
06.12.2019, 20:38
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
У дивана карта нормалей перевернута.
Так бывает если в редакторе рисовать из перевернутых полигонов.
|
|
06.12.2019, 21:25
|
|
Аспирант
|
|
Регистрация: 18.10.2014
Сообщений: 35
|
|
|
Диван был уголок справа, я вытянул его на левую сторону. Как исправить подумаю.
Теперь все устраивает, смещение сделал. Одна проблема, перегружаем страницу объект черный, пока не тронешь мышкой, нужно решить как-то...
|
|
06.12.2019, 22:29
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
в 48й render(); два раза вызвать
|
|
07.12.2019, 09:29
|
|
Аспирант
|
|
Регистрация: 18.10.2014
Сообщений: 35
|
|
Сообщение от MallSerg
|
|
в 48й render(); два раза вызвать
|
Повтор строки render(); не помогает.
Диван исправил
Новый адрес модели
Последний раз редактировалось egor8, 07.12.2019 в 13:47.
|
|
07.12.2019, 18:13
|
|
Аспирант
|
|
Регистрация: 18.10.2014
Сообщений: 35
|
|
|
Сделал 2 куба один покрасил просто цветом, второй окрасил текстурой таких же кирпичей, их перевел в .kmz. Первый куб сразу цвет видно, а на втором видно текстуру, когда мышкой сделаешь движение, например небольшой поворот.
|
|
07.12.2019, 19:27
|
|
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,127
|
|
|
Потому что нет освещения.
Освещение появляется только когда двинешь камерой
light.position.set( camera.position.x, camera.position.y ,camera.position.z );
У камеры нет позиции пока ее не передвинешь.
Следовательно свет устанавливается на позицию камеры (в никуда).
Сделай свет заранее.
А лучше с помощью отладчика посмотри как сделан свет на других three js сценах и сделай так же.
просто ставишь точку остоновки на render и смотришь что лежит в scene там массив со всеми камерами источниками света и все меши в мешах можешь посмотреть какие у них материалы.
|
|
07.12.2019, 20:10
|
|
Аспирант
|
|
Регистрация: 18.10.2014
Сообщений: 35
|
|
1. Вот другое расширение .OBJ при экспорте, так получилось. Хорошо смотрится, только в центр нужно сместить и повернуть, чтоб 2 стороны было видно.
2.
|
Сообщение от MallSerg
|
|
Сделай свет заранее.
|
Трудно пока, только изучаю, помогите вот последний код:
<!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>
|
|
|
|
