Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
307 lines (261 sloc) 14.2 KB
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
overflow-x: hidden;
overflow-y: hidden;
}
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<a href="https://github.com/InventivetalentDev/MineRender/blob/master/demo/model/index.html" target="_blank" style="position: absolute;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
<div style="position: fixed; left:10px; top:10px; background-color:lightgray; opacity: 50;z-index:10;font-family: 'Courier New',monospace;">
<div id="targetInfo" style="margin: 5px;">
</div>
</div>
<div style="position: fixed; right:10px; top:10px; background-color:lightgray; opacity: 50;z-index:10;font-family: 'Courier New',monospace;">
<div style="margin: 10px;">
<div>
<label for="nameInput">Model/Blockstate Name</label>
<input type="text" id="nameInput" value="stone">
</div>
<div>
<label for="typeInput">Type</label>
<select id="typeInput">
<option value="blockstate">BlockState</option>
<option value="model">Model</option>
</select>
</div>
</div>
<div style="margin: 10px;">
<div>
<label for="displayInput">Display</label>
<select id="displayInput">
<option value="">(default)</option>
<option class="displayOption" value="ground">ground</option>
<option class="displayOption" value="gui">gui</option>
<option class="displayOption" value="head">head</option>
<option class="displayOption" value="fixed">fixed</option>
<option class="displayOption" value="thirdperson_righthand">thirdperson_righthand</option>
<option class="displayOption" value="thirdperson_lefthand">thirdperson_lefthand</option>
<option class="displayOption" value="firstperson_righthand">firstperson_righthand</option>
<option class="displayOption" value="firstperson_lefthand">firstperson_lefthand</option>
</select>
</div>
<div>
<label for="variantInput">Variant</label>
<select id="variantInput">
</select>
</div>
</div>
<div style="margin: 10px;">
<div>
<label>Camera</label>
<input type="number" id="cameraX"><input type="number" id="cameraY"><input type="number" id="cameraZ">
</div>
</div>
<div style="margin: 10px;">
<div>
<label for="multipartGroup"><strong>MultiPart conditions</strong></label>
<div id="multipartGroup">
</div>
</div>
</div>
</div>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js" integrity="sha256-NGC9JEuTWN4GhTj091wctgjzftr+8WNDmw0H8J5YPYE=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/InventivetalentDev/MineRender@1.1.1/dist/model.js"></script>
<script>
(function () {
window.modelRender = new ModelRender({
centerCubes: true,
showOutlines: false,
camera: {
type: "perspective",
x: 20,
y: 15,
z: 20,
target: [0, 0, 0]
}
}, document.getElementById("container"));
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function onMouseMove(event) {
mouse.x = (event.clientX / modelRender.element.offsetWidth) * 2 - 1;
mouse.y = -(event.clientY / modelRender.element.offsetHeight) * 2 + 1;
}
window.addEventListener('mousemove', onMouseMove, false);
let currentIntersect;
function onModelRender() {
$("#targetInfo").empty();
raycaster.setFromCamera(mouse, modelRender._camera);
// calculate objects intersecting the picking ray
let intersects = raycaster.intersectObjects(modelRender._scene.children, true);
for (let i = 0; i < intersects.length; i++) {
if (i === 0) {
$("#targetInfo").append(intersects[i].object.name + "<br/>");
if (intersects[i].face && intersects[i].object.material) {
let material = intersects[i].object.material[intersects[i].face.materialIndex];
if (material)
$("#targetInfo").append("&nbsp;&nbsp;" + material.name + "<br/>");
}
currentIntersect = intersects[i];
} else {
$("#targetInfo").append("<span style='color:gray'>" + intersects[i].object.name + "</span><br/>")
}
}
}
document.getElementById("container").addEventListener("modelRender", onModelRender);
document.getElementById("container").addEventListener("click",function () {
console.log(currentIntersect);
})
function doRender() {
if (window.modelRender && window.modelRender._scene) {
window.modelRender.clearScene();
window.modelRender.models = [];
}
let type = $("#typeInput").val();
let name = $("#nameInput").val();
let variant = $("#variantInput").val();
let display = $("#displayInput").val();
let camX = parseFloat($("#cameraX").val());
let camY = parseFloat($("#cameraY").val());
let camZ = parseFloat($("#cameraZ").val());
let multipartOptions = {};
let option = {};
if (display && display.length > 0) {
option["display"] = display;
}
if (camX > 0 || camY > 0 || camZ > 0) {
modelRender._camera.position.set(camX, camY, camZ);
modelRender._camera.lookAt(0, 0, 0);
}
if (type === "blockstate") {
$("#variantInput").prop("disabled", false);
if (name.indexOf("/") !== -1) {
$("#nameInput").val(name.substr(name.indexOf("/") + 1));
name = name.substr(name.indexOf("/") + 1);
}
name = name.trim();
option["blockstate"] = name;
if (variant && variant.length > 0) {
option["variant"] = variant;
}
option["multipart"] = {};
$(".multipartInput").each(function () {
let val = $(this).val();
console.log(val)
if (val && val.length > 0) {
option["multipart"][$(this).attr("name")] = val;
multipartOptions[$(this).attr("name")] = val;
}
});
} else if (type === "model") {
$("#variantInput").prop("disabled", true);
if (name.indexOf("/") === -1) {
$("#nameInput").val("block/" + name);
name = "block/" + name;
}
name = name.trim();
option["model"] = name;
}
setTimeout(function () {
console.log(option);
window.modelRender.render([option], function () {
console.log(window.modelRender.blockstate);
console.log(window.modelRender.modelData)
$("#variantInput").empty();
if (window.modelRender.blockstate.variants) {
$("#variantInput").prop("disabled", false);
for (let v in window.modelRender.blockstate.variants) {
$("#variantInput").append("<option value='" + v + "'>" + (v === "" ? "(normal)" : v) + "</option>");
}
if (variant && variant.length > 0) {
$("#variantInput").val(variant);
}
} else {
$("#variantInput").prop("disabled", true);
}
if (window.modelRender.blockstate.multipart) {
$("#multipartGroup").empty();
let added = [];
console.log(window.modelRender.blockstate.multipart)
for (let j = 0; j < window.modelRender.blockstate.multipart.length; j++) {
let v = window.modelRender.blockstate.multipart[j];
if (v.when) {
if (v.when.hasOwnProperty("OR")) {
for (let k = 0; k < v.when.OR.length; k++) {
for (let c in v.when.OR[k]) {
if (v.when.OR[k].hasOwnProperty(c)) {
if (added.indexOf(c) !== -1) continue;
$("#multipartGroup").append("<label>" + c + "</label><input type='text' class='multipartInput' name='" + c + "' value='" + (multipartOptions.hasOwnProperty(c) ? multipartOptions[c] : "") + "'><br/>");
$(".multipartInput").on("change", doRender);
added.push(c);
}
}
}
} else {
for (let c in v.when) {
if (v.when.hasOwnProperty(c)) {
if (added.indexOf(c) !== -1) continue;
$("#multipartGroup").append("<label>" + c + "</label><input type='text' class='multipartInput' name='" + c + "' value='" + (multipartOptions.hasOwnProperty(c) ? multipartOptions[c] : "") + "'><br/>");
$(".multipartInput").on("change", doRender);
added.push(c);
}
}
}
}
}
}
$("#cameraX").val(modelRender._camera.position.x);
$("#cameraY").val(modelRender._camera.position.y);
$("#cameraZ").val(modelRender._camera.position.z);
// $(".displayOption").prop("disabled", true);
// if (modelRender.modelData.hasOwnProperty("display")) {
// for (let d in modelRender.modelData.display) {
// $(".displayOption[value=" + d + "]").prop("disabled", false);
// }
// }
});
}, 200);
}
$("#typeInput").on("change", doRender);
$("#nameInput").on("change", function () {
$("#variantInput").empty();
$("#multipartGroup").empty();
doRender();
});
$("#variantInput").on("change", doRender);
$("#displayInput").on("change", doRender);
// Initial render
doRender();
// window.modelRender.render([{
// model: "block/purpur_stairs",
// rotation: [0, 180, 0],
// offset: [16, 0, 16]
// }], function () {
//
// });
// let cancel = false;
// document.body.addEventListener("modelRender", function () {
// if (cancel) {
// console.log("cancel!")
// cancelAnimationFrame(window.modelRender._animId);
// } else if (window.modelRender.models.length > 0) {
// console.log("should cancel")
// cancel = true;
// }
// })
})();
</script>
</body>
</html>
You can’t perform that action at this time.