mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-14 18:27:56 +01:00
561 lines
13 KiB
HTML
561 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>three.js / examples</title>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'inconsolata';
|
||
|
|
src: url('files/inconsolata.woff') format('woff');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
*{
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #ffffff;
|
||
|
|
margin: 0px;
|
||
|
|
height: 100%;
|
||
|
|
color: #555;
|
||
|
|
font-family: 'inconsolata';
|
||
|
|
font-size: 15px;
|
||
|
|
line-height: 18px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin-top: 30px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
margin-left: 20px;
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #2194CE;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel {
|
||
|
|
position: fixed;
|
||
|
|
left: 0px;
|
||
|
|
width: 310px;
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
background: #fafafa;
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel #content {
|
||
|
|
padding: 0px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel #content .link {
|
||
|
|
color: #2194CE;
|
||
|
|
text-decoration: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel #content .selected {
|
||
|
|
color: #ff0000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#panel #content .link:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
#viewer {
|
||
|
|
position: absolute;
|
||
|
|
border: 0px;
|
||
|
|
left: 310px;
|
||
|
|
width: calc(100% - 310px);
|
||
|
|
height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#button {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
padding: 8px;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #555;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
#button:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* mobile */
|
||
|
|
|
||
|
|
#expandButton {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
right: 20px;
|
||
|
|
top: 12px;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#expandButton span {
|
||
|
|
height: 2px;
|
||
|
|
background-color: #2194CE;
|
||
|
|
width: 16px;
|
||
|
|
position: absolute;
|
||
|
|
left: 8px;
|
||
|
|
top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#expandButton span:nth-child(1) {
|
||
|
|
top: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#expandButton span:nth-child(2) {
|
||
|
|
top: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and ( max-width: 640px ) {
|
||
|
|
h1{
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
#panel{
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
height: 480px;
|
||
|
|
width: 100%;
|
||
|
|
right: 0;
|
||
|
|
z-index: 100;
|
||
|
|
overflow: hidden;
|
||
|
|
border-bottom: 1px solid #dedede;
|
||
|
|
}
|
||
|
|
#content{
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 60px;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
font-size: 17px;
|
||
|
|
line-height: 22px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
#viewer{
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 56px;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 56px);
|
||
|
|
}
|
||
|
|
#expandButton{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#panel.collapsed{
|
||
|
|
height: 56px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="panel" class="collapsed">
|
||
|
|
<h1><a href="http://threejs.org">three.js</a> / examples</h1>
|
||
|
|
<a id="expandButton" href="#">
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
</a>
|
||
|
|
<div id="content"></div>
|
||
|
|
</div>
|
||
|
|
<iframe id="viewer" allowfullscreen onmousewheel=""></iframe>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var files = {
|
||
|
|
"webgl": [
|
||
|
|
"webgl_animation_cloth",
|
||
|
|
"webgl_animation_skinning_blending",
|
||
|
|
"webgl_animation_skinning_morph",
|
||
|
|
"webgl_buffergeometry",
|
||
|
|
"webgl_buffergeometry_custom_attributes_particles",
|
||
|
|
"webgl_buffergeometry_lines",
|
||
|
|
"webgl_buffergeometry_lines_indexed",
|
||
|
|
"webgl_buffergeometry_particles",
|
||
|
|
"webgl_buffergeometry_drawcalls",
|
||
|
|
"webgl_buffergeometry_rawshader",
|
||
|
|
"webgl_buffergeometry_uint",
|
||
|
|
"webgl_camera",
|
||
|
|
"webgl_camera_logarithmicdepthbuffer",
|
||
|
|
"webgl_custom_attributes",
|
||
|
|
"webgl_custom_attributes_lines",
|
||
|
|
"webgl_custom_attributes_particles",
|
||
|
|
"webgl_custom_attributes_particles2",
|
||
|
|
"webgl_custom_attributes_particles3",
|
||
|
|
"webgl_decals",
|
||
|
|
"webgl_effects_anaglyph",
|
||
|
|
"webgl_effects_parallaxbarrier",
|
||
|
|
"webgl_effects_stereo",
|
||
|
|
"webgl_geometries",
|
||
|
|
"webgl_geometries2",
|
||
|
|
"webgl_geometry_colors",
|
||
|
|
"webgl_geometry_colors_blender",
|
||
|
|
"webgl_geometry_colors_lookuptable",
|
||
|
|
"webgl_geometry_convex",
|
||
|
|
"webgl_geometry_cube",
|
||
|
|
"webgl_geometry_dynamic",
|
||
|
|
"webgl_geometry_extrude_shapes",
|
||
|
|
"webgl_geometry_extrude_shapes2",
|
||
|
|
"webgl_geometry_extrude_splines",
|
||
|
|
"webgl_geometry_hierarchy",
|
||
|
|
"webgl_geometry_hierarchy2",
|
||
|
|
"webgl_geometry_large_mesh",
|
||
|
|
"webgl_geometry_minecraft",
|
||
|
|
"webgl_geometry_minecraft_ao",
|
||
|
|
"webgl_geometry_normals",
|
||
|
|
"webgl_geometry_nurbs",
|
||
|
|
"webgl_geometry_shapes",
|
||
|
|
"webgl_geometry_terrain",
|
||
|
|
"webgl_geometry_terrain_fog",
|
||
|
|
"webgl_geometry_terrain_raycast",
|
||
|
|
"webgl_geometry_text",
|
||
|
|
"webgl_geometry_text2",
|
||
|
|
"webgl_gpgpu_birds",
|
||
|
|
"webgl_hdr",
|
||
|
|
"webgl_helpers",
|
||
|
|
"webgl_interactive_buffergeometry",
|
||
|
|
"webgl_interactive_cubes",
|
||
|
|
"webgl_interactive_cubes_gpu",
|
||
|
|
"webgl_interactive_cubes_ortho",
|
||
|
|
"webgl_interactive_draggablecubes",
|
||
|
|
"webgl_interactive_lines",
|
||
|
|
"webgl_interactive_particles",
|
||
|
|
"webgl_interactive_raycasting_pointcloud",
|
||
|
|
"webgl_interactive_voxelpainter",
|
||
|
|
"webgl_kinect",
|
||
|
|
"webgl_lensflares",
|
||
|
|
"webgl_lights_hemisphere",
|
||
|
|
"webgl_lights_pointlights",
|
||
|
|
"webgl_lights_pointlights2",
|
||
|
|
"webgl_lines_colors",
|
||
|
|
"webgl_lines_cubes",
|
||
|
|
"webgl_lines_dashed",
|
||
|
|
"webgl_lines_sphere",
|
||
|
|
"webgl_lines_splines",
|
||
|
|
"webgl_loader_assimp2json",
|
||
|
|
"webgl_loader_awd",
|
||
|
|
"webgl_loader_babylon",
|
||
|
|
"webgl_loader_collada",
|
||
|
|
"webgl_loader_collada_keyframe",
|
||
|
|
"webgl_loader_collada_skinning",
|
||
|
|
"webgl_loader_collada_kinematics",
|
||
|
|
"webgl_loader_ctm",
|
||
|
|
"webgl_loader_ctm_materials",
|
||
|
|
"webgl_loader_gltf",
|
||
|
|
"webgl_loader_json_blender",
|
||
|
|
"webgl_loader_json_objconverter",
|
||
|
|
"webgl_loader_msgpack",
|
||
|
|
"webgl_loader_obj",
|
||
|
|
"webgl_loader_obj_mtl",
|
||
|
|
"webgl_loader_pdb",
|
||
|
|
"webgl_loader_ply",
|
||
|
|
"webgl_loader_scene",
|
||
|
|
"webgl_loader_stl",
|
||
|
|
"webgl_loader_utf8",
|
||
|
|
"webgl_loader_vrml",
|
||
|
|
"webgl_loader_vtk",
|
||
|
|
"webgl_lod",
|
||
|
|
"webgl_marchingcubes",
|
||
|
|
"webgl_materials",
|
||
|
|
"webgl_materials2",
|
||
|
|
"webgl_materials_blending",
|
||
|
|
"webgl_materials_blending_custom",
|
||
|
|
"webgl_materials_bumpmap",
|
||
|
|
"webgl_materials_bumpmap_skin",
|
||
|
|
"webgl_materials_cars",
|
||
|
|
"webgl_materials_cars_camaro",
|
||
|
|
"webgl_materials_cubemap",
|
||
|
|
"webgl_materials_cubemap_balls_reflection",
|
||
|
|
"webgl_materials_cubemap_balls_refraction",
|
||
|
|
"webgl_materials_cubemap_dynamic",
|
||
|
|
"webgl_materials_cubemap_dynamic2",
|
||
|
|
"webgl_materials_cubemap_escher",
|
||
|
|
"webgl_materials_cubemap_refraction",
|
||
|
|
"webgl_materials_envmaps",
|
||
|
|
"webgl_materials_grass",
|
||
|
|
"webgl_materials_lightmap",
|
||
|
|
"webgl_materials_normalmap",
|
||
|
|
"webgl_materials_normaldisplacementmap",
|
||
|
|
"webgl_materials_parallaxmap",
|
||
|
|
"webgl_materials_shaders_fresnel",
|
||
|
|
"webgl_materials_skin",
|
||
|
|
"webgl_materials_texture_anisotropy",
|
||
|
|
"webgl_materials_texture_compressed",
|
||
|
|
"webgl_materials_texture_filters",
|
||
|
|
"webgl_materials_texture_manualmipmap",
|
||
|
|
"webgl_materials_texture_pvrtc",
|
||
|
|
"webgl_materials_texture_tga",
|
||
|
|
"webgl_materials_video",
|
||
|
|
"webgl_materials_wireframe",
|
||
|
|
"webgl_mirror",
|
||
|
|
"webgl_modifier_subdivision",
|
||
|
|
"webgl_modifier_tessellation",
|
||
|
|
"webgl_morphnormals",
|
||
|
|
"webgl_morphtargets",
|
||
|
|
"webgl_morphtargets_horse",
|
||
|
|
"webgl_morphtargets_human",
|
||
|
|
"webgl_morphtargets_md2",
|
||
|
|
"webgl_morphtargets_md2_control",
|
||
|
|
"webgl_multiple_canvases_circle",
|
||
|
|
"webgl_multiple_canvases_complex",
|
||
|
|
"webgl_multiple_canvases_grid",
|
||
|
|
"webgl_multiple_views",
|
||
|
|
"webgl_nearestneighbour",
|
||
|
|
"webgl_octree",
|
||
|
|
"webgl_octree_raycasting",
|
||
|
|
"webgl_panorama_equirectangular",
|
||
|
|
"webgl_particles_billboards",
|
||
|
|
"webgl_particles_billboards_colors",
|
||
|
|
"webgl_particles_dynamic",
|
||
|
|
"webgl_particles_random",
|
||
|
|
"webgl_particles_shapes",
|
||
|
|
"webgl_particles_sprites",
|
||
|
|
"webgl_performance",
|
||
|
|
"webgl_performance_doublesided",
|
||
|
|
"webgl_performance_static",
|
||
|
|
"webgl_postprocessing",
|
||
|
|
"webgl_postprocessing_advanced",
|
||
|
|
"webgl_postprocessing_dof",
|
||
|
|
"webgl_postprocessing_dof2",
|
||
|
|
"webgl_postprocessing_godrays",
|
||
|
|
"webgl_postprocessing_crossfade",
|
||
|
|
"webgl_postprocessing_glitch",
|
||
|
|
"webgl_rtt",
|
||
|
|
"webgl_sandbox",
|
||
|
|
"webgl_shader",
|
||
|
|
"webgl_shader_lava",
|
||
|
|
"webgl_shader2",
|
||
|
|
"webgl_shaders_ocean",
|
||
|
|
"webgl_shading_physical",
|
||
|
|
"webgl_shaders_sky",
|
||
|
|
"webgl_shaders_tonemapping",
|
||
|
|
"webgl_shaders_vector",
|
||
|
|
"webgl_shadowmap",
|
||
|
|
"webgl_shadowmap_performance",
|
||
|
|
"webgl_shadowmap_viewer",
|
||
|
|
"webgl_shadowmesh",
|
||
|
|
"webgl_sprites",
|
||
|
|
"webgl_terrain_dynamic",
|
||
|
|
"webgl_test_memory",
|
||
|
|
"webgl_test_memory2",
|
||
|
|
"webgl_trails",
|
||
|
|
"webgl_video_panorama_equirectangular"
|
||
|
|
],
|
||
|
|
"webgldeferred": [
|
||
|
|
"webgldeferred_animation",
|
||
|
|
"webgldeferred_arealights",
|
||
|
|
"webgldeferred_pointlights"
|
||
|
|
],
|
||
|
|
"vr": [
|
||
|
|
"vr_cubes",
|
||
|
|
"vr_video"
|
||
|
|
],
|
||
|
|
"css3d": [
|
||
|
|
"css3d_molecules",
|
||
|
|
"css3d_panorama",
|
||
|
|
"css3d_periodictable",
|
||
|
|
"css3d_sandbox",
|
||
|
|
"css3d_sprites",
|
||
|
|
"css3d_youtube"
|
||
|
|
],
|
||
|
|
"css3d stereo": [
|
||
|
|
"css3dstereo_periodictable",
|
||
|
|
],
|
||
|
|
"misc": [
|
||
|
|
"misc_animation_keys",
|
||
|
|
"misc_controls_deviceorientation",
|
||
|
|
"misc_controls_fly",
|
||
|
|
"misc_controls_orbit",
|
||
|
|
"misc_controls_pointerlock",
|
||
|
|
"misc_controls_trackball",
|
||
|
|
"misc_controls_transform",
|
||
|
|
"misc_lights_test",
|
||
|
|
"misc_lookat",
|
||
|
|
"misc_fps",
|
||
|
|
"misc_sound",
|
||
|
|
"misc_ubiquity_test",
|
||
|
|
"misc_ubiquity_test2",
|
||
|
|
"misc_uv_tests"
|
||
|
|
],
|
||
|
|
"canvas": [
|
||
|
|
"canvas_ascii_effect",
|
||
|
|
"canvas_camera_orthographic",
|
||
|
|
"canvas_camera_orthographic2",
|
||
|
|
"canvas_effects_stereo",
|
||
|
|
"canvas_geometry_birds",
|
||
|
|
"canvas_geometry_cube",
|
||
|
|
"canvas_geometry_earth",
|
||
|
|
"canvas_geometry_hierarchy",
|
||
|
|
"canvas_geometry_nurbs",
|
||
|
|
"canvas_geometry_panorama",
|
||
|
|
"canvas_geometry_panorama_fisheye",
|
||
|
|
"canvas_geometry_shapes",
|
||
|
|
"canvas_geometry_terrain",
|
||
|
|
"canvas_geometry_text",
|
||
|
|
"canvas_interactive_cubes",
|
||
|
|
"canvas_interactive_cubes_tween",
|
||
|
|
"canvas_interactive_particles",
|
||
|
|
"canvas_interactive_voxelpainter",
|
||
|
|
"canvas_lights_pointlights",
|
||
|
|
"canvas_lines",
|
||
|
|
"canvas_lines_colors",
|
||
|
|
"canvas_lines_dashed",
|
||
|
|
"canvas_lines_sphere",
|
||
|
|
"canvas_materials",
|
||
|
|
"canvas_materials_depth",
|
||
|
|
"canvas_materials_normal",
|
||
|
|
"canvas_materials_reflection",
|
||
|
|
"canvas_materials_video",
|
||
|
|
"canvas_morphtargets_horse",
|
||
|
|
"canvas_particles_floor",
|
||
|
|
"canvas_particles_random",
|
||
|
|
"canvas_particles_shapes",
|
||
|
|
"canvas_particles_sprites",
|
||
|
|
"canvas_particles_waves",
|
||
|
|
"canvas_performance",
|
||
|
|
"canvas_sandbox"
|
||
|
|
],
|
||
|
|
"raytracing": [
|
||
|
|
"raytracing_sandbox"
|
||
|
|
],
|
||
|
|
"software": [
|
||
|
|
"software_geometry_earth",
|
||
|
|
"software_sandbox"
|
||
|
|
],
|
||
|
|
"svg": [
|
||
|
|
"svg_sandbox"
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
var panel = document.getElementById( 'panel' );
|
||
|
|
var content = document.getElementById( 'content' );
|
||
|
|
var viewer = document.getElementById( 'viewer' );
|
||
|
|
|
||
|
|
var expandButton = document.getElementById( 'expandButton' );
|
||
|
|
expandButton.addEventListener( 'click', function ( event ) {
|
||
|
|
panel.classList.toggle( 'collapsed' );
|
||
|
|
event.preventDefault();
|
||
|
|
} );
|
||
|
|
|
||
|
|
// iOS8 workaround
|
||
|
|
|
||
|
|
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
|
||
|
|
|
||
|
|
viewer.addEventListener( 'load', function ( event ) {
|
||
|
|
|
||
|
|
viewer.contentWindow.innerWidth -= 10;
|
||
|
|
viewer.contentWindow.innerHeight -= 2;
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var container = document.createElement( 'div' );
|
||
|
|
content.appendChild( container );
|
||
|
|
|
||
|
|
var button = document.createElement( 'div' );
|
||
|
|
button.id = 'button';
|
||
|
|
button.textContent = 'View source';
|
||
|
|
button.addEventListener( 'click', function ( event ) {
|
||
|
|
|
||
|
|
var array = location.href.split( '/' );
|
||
|
|
array.pop();
|
||
|
|
|
||
|
|
window.open( 'view-source:' + array.join( '/' ) + '/' + selected + '.html' );
|
||
|
|
|
||
|
|
}, false );
|
||
|
|
button.style.display = 'none';
|
||
|
|
document.body.appendChild( button );
|
||
|
|
|
||
|
|
var divs = {};
|
||
|
|
var selected = null;
|
||
|
|
|
||
|
|
for ( var key in files ) {
|
||
|
|
|
||
|
|
var section = files[ key ];
|
||
|
|
|
||
|
|
var div = document.createElement( 'h2' );
|
||
|
|
div.textContent = key;
|
||
|
|
container.appendChild( div );
|
||
|
|
|
||
|
|
for ( var i = 0; i < section.length; i ++ ) {
|
||
|
|
|
||
|
|
( function ( file ) {
|
||
|
|
|
||
|
|
var name = file.split( '_' );
|
||
|
|
name.shift();
|
||
|
|
name = name.join( ' / ' );
|
||
|
|
|
||
|
|
var div = document.createElement( 'div' );
|
||
|
|
div.className = 'link';
|
||
|
|
div.textContent = name;
|
||
|
|
div.addEventListener( 'click', function () {
|
||
|
|
|
||
|
|
panel.classList.toggle( 'collapsed' );
|
||
|
|
load( file );
|
||
|
|
|
||
|
|
} );
|
||
|
|
container.appendChild( div );
|
||
|
|
|
||
|
|
divs[ file ] = div;
|
||
|
|
|
||
|
|
} )( section[ i ] );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var load = function ( file ) {
|
||
|
|
|
||
|
|
if ( selected !== null ) divs[ selected ].className = 'link';
|
||
|
|
|
||
|
|
divs[ file ].className = 'link selected';
|
||
|
|
|
||
|
|
window.location.hash = file;
|
||
|
|
viewer.src = file + '.html';
|
||
|
|
viewer.focus();
|
||
|
|
|
||
|
|
button.style.display = '';
|
||
|
|
|
||
|
|
selected = file;
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
if ( window.location.hash !== '' ) {
|
||
|
|
|
||
|
|
load( window.location.hash.substring( 1 ) );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|