代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Verge3D Code Examples</title>
<meta name="description" content="300+ WebGL examples demonstrating the features of the Verge3D framework. Source code included." />
<meta content="Verge3D Code Examples - Soft8Soft" property="og:title">
<meta content="300+ WebGL examples demonstrating the features of the Verge3D framework. Source code included." property="og:description">
<meta content="https://cdn.soft8soft.com/images/code_examples.jpeg" property="og:image">
<!-- favicons from realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="files/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="files/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="files/icons/favicon-16x16.png">
<link rel="manifest" href="files/icons/manifest.json">
<link rel="mask-icon" href="files/icons/safari-pinned-tab.svg" color="#5bbad5 ">
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(46001298, "init", {
id:46001298,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/46001298" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" href="files/favicon.ico" />
<link rel="stylesheet" type="text/css" href="files/main.css">
</head>
<body>
<div id="panel">
<div id="header">
<h1><a href="https://www.soft8soft.com/verge3d">Verge3D</a></h1>
<div id="sections">
<a href="https://www.soft8soft.com/docs/manual/en/index.html">docs</a>
<span class="selected">examples</span>
</div>
<div id="expandButton"></div>
</div>
<div id="panelScrim"></div>
<div id="contentWrapper">
<div id="inputWrapper">
<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
<div id="exitSearchButton"></div>
</div>
<div id="content">
<img id="previewsToggler" src="./files/thumbnails.svg" width="20" height="20" />
</div>
</div>
</div>
<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel="" src="blank.html"></iframe>
<a id="button" target="_blank"><img src="files/ic_code_black_24dp.svg"></a>
<script>
const panel = document.getElementById('panel');
const content = document.getElementById('content');
const viewer = document.getElementById('viewer');
const filterInput = document.getElementById('filterInput');
const exitSearchButton = document.getElementById('exitSearchButton');
const expandButton = document.getElementById('expandButton');
const viewSrcButton = document.getElementById('button');
const panelScrim = document.getElementById('panelScrim');
const previewsToggler = document.getElementById('previewsToggler');
const links = {};
const validRedirects = new Map();
const container = document.createElement('div');
let selected = null;
init();
async function init() {
content.appendChild(container);
viewSrcButton.style.display = 'none';
const files = await (await fetch('files.json')).json();
const tags = await (await fetch('tags.json')).json();
for (const key in files) {
const section = files[key];
const header = document.createElement('h2');
header.textContent = key;
header.setAttribute('data-category', key);
container.appendChild(header);
for (let i = 0; i < section.length; i++) {
const file = section[i];
const link = createLink(file);
container.appendChild(link);
links[file] = link;
validRedirects.set(file, file + '.html');
}
}
if (window.location.hash !== '') {
const file = window.location.hash.substring(1);
// use a predefined map of redirects to avoid untrusted URL redirection due to user-provided value
if (validRedirects.has(file) === true) {
selectFile(file);
viewer.src = validRedirects.get(file);
}
}
filterInput.value = extractQuery();
if (filterInput.value !== '') {
panel.classList.add('searchFocused');
}
updateFilter(files, tags);
// Events
filterInput.onfocus = function() {
panel.classList.add('searchFocused');
};
filterInput.onblur = function() {
if (filterInput.value === '') {
panel.classList.remove('searchFocused');
}
};
exitSearchButton.onclick = function() {
filterInput.value = '';
updateFilter(files, tags);
panel.classList.remove('searchFocused');
};
filterInput.addEventListener('input', function() {
updateFilter(files, tags);
});
expandButton.addEventListener('click', function(event) {
event.preventDefault();
panel.classList.toggle('open');
});
panelScrim.onclick = function(event) {
event.preventDefault();
panel.classList.toggle('open');
};
previewsToggler.onclick = function(event) {
event.preventDefault();
content.classList.toggle('minimal');
};
// iOS iframe auto-resize workaround
if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) {
viewer.style.width = getComputedStyle(viewer).width;
viewer.style.height = getComputedStyle(viewer).height;
viewer.setAttribute('scrolling', 'no');
}
}
function createLink(file) {
const template = `
<div class="card">
<a href="${file}.html" target="viewer">
<div class="cover">
<img src="screenshots/${ file }.jpg" loading="lazy" width="400" />
</div>
<div class="title">${getName(file)}</div>
</a>
</div>
`;
const link = createElementFromHTML(template);
link.querySelector('a[target="viewer"]').addEventListener('click', function(event) {
if (event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey) return;
selectFile(file);
});
return link;
}
function selectFile(file) {
if (selected !== null) links[selected].classList.remove('selected');
links[file].classList.add('selected');
window.location.hash = file;
viewer.focus();
panel.classList.remove('open');
selected = file;
// Reveal "View source" button and set attributes to this example
viewSrcButton.style.display = '';
viewSrcButton.href = 'https://github.com/Soft8Soft/verge3d-code-examples/blob/master/' + selected + '.html';
viewSrcButton.title = 'View source code for ' + getName(selected) + ' on GitHub';
}
function updateFilter(files, tags) {
let v = filterInput.value.trim();
v = v.replace(/\s+/gi, ' '); // replace multiple whitespaces with a single one
if (v !== '') {
window.history.replaceState({}, '', '?q=' + v + window.location.hash);
} else {
window.history.replaceState({}, '', window.location.pathname + window.location.hash);
}
const exp = new RegExp(v, 'gi');
for (const key in files) {
const section = files[key];
for (let i = 0; i < section.length; i++) {
filterExample(section[i], exp, tags);
}
}
layoutList(files);
}
function filterExample(file, exp, tags) {
const link = links[file];
const name = getName(file);
if (file in tags) file += ' ' + tags[file].join(' ');
const res = file.match(exp);
let text;
if (res && res.length > 0) {
link.classList.remove('hidden');
for (let i = 0; i < res.length; i++) {
text = name.replace(res[i], '<b>' + res[i] + '</b>');
}
link.querySelector('.title').innerHTML = text;
} else {
link.classList.add('hidden');
link.querySelector('.title').innerHTML = name;
}
}
function getName(file) {
const name = file.split('_');
name.shift();
return name.join(' / ');
}
function layoutList(files) {
for (const key in files) {
let collapsed = true;
const section = files[key];
for (let i = 0; i < section.length; i++) {
const file = section[i];
if (links[file].classList.contains('hidden') === false) {
collapsed = false;
break;
}
}
const element = document.querySelector('h2[data-category="' + key + '"]');
if (collapsed) {
element.classList.add('hidden');
} else {
element.classList.remove('hidden');
}
}
}
function extractQuery() {
const p = window.location.search.indexOf('?q=');
if (p !== - 1) {
return decodeURI(window.location.search.substr(3));
}
return '';
}
function createElementFromHTML(htmlString) {
const div = document.createElement('div');
div.innerHTML = htmlString.trim();
return div.firstChild;
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手