threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
33 lines (32 loc) • 1.59 kB
JavaScript
import { _testFinish, CustomBumpMapPlugin, LoadingScreenPlugin, Mesh, PhysicalMaterial, PlaneGeometry, ThreeViewer, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
plugins: [LoadingScreenPlugin],
});
const customBump = viewer.addPluginSync(CustomBumpMapPlugin);
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
const model = new Mesh(new PlaneGeometry(4, 2), new PhysicalMaterial());
const material = model.material;
viewer.scene.addObject(model);
const bumpMap1 = await viewer.load('https://threejs.org/examples/textures/brick_bump.jpg');
const bumpMap2 = await viewer.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
customBump.enableCustomBump(material, bumpMap2, -0.2);
material.bumpMap = bumpMap1 || null;
material.bumpScale = -0.01;
material.setDirty();
// set properties like this or from the UI
// material.userData._customBumpMat = texture
// material.setDirty()
// to disable
// material.userData._hasCustomBump = false
// material.setDirty()
ui.setupPluginUi(CustomBumpMapPlugin);
const config = material.uiConfig;
ui.appendChild(customBump.materialExtension.getUiConfig?.(material), { expanded: true });
ui.appendChild(config);
}
init().finally(_testFinish);