threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
73 lines (72 loc) • 3.25 kB
JavaScript
import { _testFinish, BoxGeometry, LoadingScreenPlugin, Mesh, ParallaxMappingPlugin, PhysicalMaterial, SSAAPlugin, ThreeViewer, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
plugins: [new SSAAPlugin(4), LoadingScreenPlugin],
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
});
const parallaxMapping = viewer.addPluginSync(ParallaxMappingPlugin);
console.log(parallaxMapping);
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
ui.setupPluginUi(ParallaxMappingPlugin, { expanded: true });
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
const cube = new Mesh(new BoxGeometry(1, 1, 1), new PhysicalMaterial({
// roughness: 0,
// metalness: 1,
}));
const maps = [
'https://threejs.org/examples/textures/sprite0.png',
'https://threejs.org/examples/textures/uv_grid_opengl.jpg',
'https://threejs.org/examples/models/svg/style-css-inside-defs.svg',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/lookuptable.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/perlin3_cp.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/perlin4_cp.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/ObjectSheet.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/512x512_Texel_Density_Texture_1.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/toy_box_normal.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/example_1_texture.png',
];
const bumps = [
maps[0],
maps[1],
maps[2],
maps[3],
maps[4],
maps[5],
maps[6],
maps[7],
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/toy_box_disp.png',
'https://cdn.jsdelivr.net/gh/Rabbid76/graphics-snippets/resource/texture/example_1_heightmap.png',
];
cube.material.bumpMap = await viewer.load(bumps[0]) || null;
cube.material.map = await viewer.load(maps[0]) || null;
cube.material.bumpScale = 0.1;
viewer.scene.addObject(cube);
ui.appendChild({
type: 'dropdown',
value: maps[0],
label: 'Bump Texture',
children: ['none', ...maps].map((url) => ({
label: url.split('/').pop(),
value: url,
})),
onChange: async (ev) => {
console.log(ev.value);
const url = ev.value;
const tex = await viewer.load(url) || null;
cube.material.map = tex;
const bumpUrl = bumps[maps.indexOf(url)];
const bumpTex = await viewer.load(bumpUrl) || null;
cube.material.bumpMap = bumpTex;
cube.material.setDirty();
},
});
ui.appendChild(cube.material.uiConfig);
}
init().finally(_testFinish);