This commit is contained in:
Azgaar 2019-10-19 17:35:35 +03:00
parent 6fb00e5bf9
commit 88852bb097
3 changed files with 45 additions and 7 deletions

View file

@ -3296,6 +3296,9 @@
<script defer src="modules/ui/3dpreview.js"></script>
<script defer src="libs/quantize.min.js"></script>
<script defer src="libs/jquery.ui.touch-punch.min.js"></script>
<script defer src="libs/three.min.js"></script>
<script defer src="libs/orbitControls.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js" onerror="
var script = document.createElement('script');
script.src = 'libs/three.min.js';
document.body.appendChild(script);
"></script> -->
</body>

View file

@ -32,17 +32,47 @@ function render() {
_3dpreviewRenderer.render(_3dpreviewScene, _3dpreviewCamera);
}
function start3dpreview(canvas) {
async function start3dpreview(canvas) {
const loaded = await loadTHREE();
if (!loaded) {
tip("Cannot load 3d library", false, "error", 4000);
return false;
};
_3dpreviewScene = new THREE.Scene();
_3dpreviewCamera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 0.1, 100000);
_3dpreviewCamera.position.x = 0;
_3dpreviewCamera.position.z = 350;
_3dpreviewCamera.position.y = 285;
_3dpreviewRenderer = new THREE.WebGLRenderer({canvas});
new THREE.OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement);
OrbitControls(_3dpreviewCamera, _3dpreviewRenderer.domElement);
_3dpreviewRenderer.setSize(canvas.width, canvas.height);
addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
_3danimationFrame = requestAnimationFrame(render);
return true;
}
function loadTHREE() {
if (window.THREE) return Promise.resolve(true);
return new Promise(resolve => {
const script = document.createElement('script');
script.src = "libs/three.min.js"
document.head.append(script);
script.onload = () => resolve(true);
script.onerror = () => resolve(false);
});
}
function OrbitControls(camera, domElement) {
if (THREE.OrbitControls) {
new THREE.OrbitControls(camera, domElement);
return;
}
const script = document.createElement('script');
script.src = "libs/orbitControls.min.js"
document.head.append(script);
script.onload = () => new THREE.OrbitControls(camera, domElement);
}
function update3dpreview(canvas) {

View file

@ -1194,7 +1194,7 @@ function editHeightmap() {
}
// 3D previewer
function toggleHeightmap3dView() {
async function toggleHeightmap3dView() {
if (document.getElementById("_3dpreview")) {
$("#_3dpreviewEditor").dialog("close");
return;
@ -1205,12 +1205,17 @@ function editHeightmap() {
canvas.style.display = "block";
canvas.width = parseFloat(_3dpreviewEditor.style.width) || graphWidth / 3;
canvas.height = canvas.width / (graphWidth / graphHeight);
const started = await start3dpreview(canvas);
if (!started) return;
document.getElementById("_3dpreviewEditor").appendChild(canvas);
start3dpreview(canvas);
canvas.onmouseenter = () => {
canvas.dataset.hovered ? tip("") : tip("Left mouse to change angle, middle mouse or mousewheel to zoom, right mouse to pan");
canvas.dataset.hovered = 1;
};
$("#_3dpreviewEditor").dialog({
title: "3D Preview", resizable: true,
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
position: {my: "left bottom", at: "left+10 bottom-20", of: "svg"},
resizeStop: resize3dpreview, close: close3dPreview
});