Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework background color & image handling #25

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rework background color & image handling #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ Use the [THREE.js editor](https://threejs.org/editor/) directly inside VSCode
|Name |Type |Description
|---------------------------------|----------|------------
|`3dviewer.wireframe` |`boolean` |Display mesh in wireframe mode
|`3dviewer.background` |`string` |Set the default background color (e.g. '#8f8f8f')
|`3dviewer.backgroundColor` |`string` |Set the default background color (e.g. '#8f8f8f')
|`3dviewer.backgroundImage` |`string` |Set the default background image
|`3dviewer.boundingBox` |`boolean` |Display a bounding box around the model
|`3dviewer.grid` |`boolean` |Display a grid at the origin
|`3dviewer.gridSize` |`number` |Set the size of the grid
Expand Down
1 change: 0 additions & 1 deletion media/viewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ html, body {

body {
font-family: Monospace;
background-color: #0f0;
color: #f00;
margin: 0px;
padding: 0px 0px;
Expand Down
169 changes: 89 additions & 80 deletions media/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,24 @@ const fpsLimit = userSettings.limitFps;
const userMenu = new dat.GUI();
const editorScene = new THREE.Scene();
const mainScene = new THREE.Scene();
const cubeTextureLoader = new THREE.CubeTextureLoader().setPath('textures/cube/');

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, userSettings.near, userSettings.far);
const renderingFolder = userMenu.addFolder('Rendering');

renderingFolder.add(camera, 'near').onChange(() => camera.updateProjectionMatrix());
renderingFolder.add(camera, 'far').onChange(() => camera.updateProjectionMatrix());
renderingFolder.addColor(userSettings, 'background').onChange(onBackgroundChange);
renderingFolder.add(userSettings, 'wireframe').onChange(onWireframeChange);
renderingFolder.addColor(userSettings, 'backgroundColor').onChange(onBackgroundColorChange);
renderingFolder.add(userSettings, 'backgroundImage', [ 'none', 'Bridge2', 'MilkyWay', 'Pisa' ]).onChange(onBackgroundImageChange);
renderingFolder.add(userSettings, 'wireframe').onChange(onWireframeToggle);
renderingFolder.add(userSettings, 'grid').name('show grid').onChange((value) => { editorScene.getObjectByName('grid').visible = value; });
renderingFolder.add(userSettings, 'gridSize').min(1).max(100).step(1).onChange(() => { editorScene.remove(editorScene.getObjectByName('grid')); createGrid(); });
editorScene.background = new THREE.Color(userSettings.background);

onBackgroundImageChange(userSettings.backgroundImage);
createGrid();

const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.autoClearColor = !userSettings.useEnvCube;
renderer.autoClearDepth = false;
renderer.autoClear = false;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Expand All @@ -47,23 +48,95 @@ light2.position.set(0, 1, 0);
mainScene.add(light2);
mainScene.add(light1);

const materials = generateMaterials(userSettings.useEnvCube);
const materials = generateMaterials();
let current_material = 'default';
const effectController = { hue: 0.0, saturation: 0.8, lightness: 0.1 };

const colorFolder = userMenu.addFolder('Material color');
const hueMenu = colorFolder.add(effectController, 'hue', 0.0, 1.0).step(0.025).onChange(() => updateColor());
const saturationMenu = colorFolder.add(effectController, 'saturation', 0.0, 1.0).step(0.025).onChange(() => updateColor());
const lightnessMenu = colorFolder.add(effectController, 'lightness', 0.0, 1.0).step(0.025).onChange(() => updateColor());
const hueMenu = colorFolder.add(effectController, 'hue', 0.0, 1.0).step(0.025).onChange(onMainObjectMaterialColorChange);
const saturationMenu = colorFolder.add(effectController, 'saturation', 0.0, 1.0).step(0.025).onChange(onMainObjectMaterialColorChange);
const lightnessMenu = colorFolder.add(effectController, 'lightness', 0.0, 1.0).step(0.025).onChange(onMainObjectMaterialColorChange);
const materialFolder = userMenu.addFolder('Materials');

for (const mat in materials) {
effectController[mat] = () => onMaterialChanged(mat);
effectController[mat] = () => onMainObjectMaterialChange(mat);
materialFolder.add(effectController, mat).name(mat);
}

animate();


function onMainObjectMaterialColorChange() {
if (mainScene.overrideMaterial) {
const color = new THREE.Color();
color.setHSL(effectController.hue, effectController.saturation, effectController.lightness);
mainScene.overrideMaterial.color = color;
}
}

function onMainObjectMaterialChange(id) {
if (current_material !== 'default') {
const oldMaterial = materials[current_material];
oldMaterial.h = hueMenu.getValue();
oldMaterial.s = saturationMenu.getValue();
oldMaterial.l = lightnessMenu.getValue();
}

current_material = id;
const newMaterial = materials[id];
mainScene.overrideMaterial = newMaterial.m;
onWireframeToggle(userSettings.wireframe);

hueMenu.setValue(newMaterial.h);
saturationMenu.setValue(newMaterial.s);
lightnessMenu.setValue(newMaterial.l);
}

function onWireframeToggle(wireframe) {
if (mainScene.overrideMaterial) {
mainScene.overrideMaterial.wireframe = wireframe;
}

const object = mainScene.getObjectByName('MainObject');
if (object) {
object.traverse(child => {
if (child['material']) {
const material = child['material'];

if (Array.isArray(material)) {
for (const m of material) {
m.wireframe = wireframe;
}
} else {
material.wireframe = wireframe;
}
}
});
}
}

function onBackgroundColorChange(color) {
editorScene.background = new THREE.Color(color);
}

function onBackgroundImageChange(name) {
if(name !== 'none') {
editorScene.background = loadCubeTexture(name);
}else{
onBackgroundColorChange(userSettings.backgroundColor);
}
}


function loadCubeTexture(name) {
const extension = name === 'Pisa' ? '.png' : '.jpg';
return cubeTextureLoader.load([
name + '/px' + extension, name + '/nx' + extension,
name + '/py' + extension, name + '/ny' + extension,
name + '/pz' + extension, name + '/nz' + extension
]);
}

function createModelLoader() {
const fileToLoad = userSettings.fileToLoad;

Expand All @@ -79,14 +152,6 @@ function createModelLoader() {
}
}

function updateColor() {
if (mainScene.overrideMaterial) {
const color = new THREE.Color();
color.setHSL(effectController.hue, effectController.saturation, effectController.lightness);
mainScene.overrideMaterial.color = color;
}
}

function onMessageReceived(event) {
const message = event.data;

Expand Down Expand Up @@ -136,24 +201,6 @@ function removeFolder(name) {
}
}

function onMaterialChanged(id) {
if (current_material !== 'default') {
const oldMaterial = materials[current_material];
oldMaterial.h = hueMenu.getValue();
oldMaterial.s = saturationMenu.getValue();
oldMaterial.l = lightnessMenu.getValue();
}

current_material = id;
const newMaterial = materials[id];
mainScene.overrideMaterial = newMaterial.m;
onWireframeChange(userSettings.wireframe);

hueMenu.setValue(newMaterial.h);
saturationMenu.setValue(newMaterial.s);
lightnessMenu.setValue(newMaterial.l);
}

function createGrid() {
const gridHelper = new THREE.GridHelper(userSettings.gridSize, userSettings.gridSize, 0xc0c0c0, 0xc0c0c0);
gridHelper.name = 'grid';
Expand Down Expand Up @@ -231,7 +278,7 @@ function loadModel() {
}
}

onWireframeChange(userSettings.wireframe);
onWireframeToggle(userSettings.wireframe);

}, onProgress, xhr => console.log(xhr.toString()));
}
Expand All @@ -250,34 +297,6 @@ function populateModelFolder(baseObject, modelFolder, property) {
}
}

function onWireframeChange(wireframe) {
if (mainScene.overrideMaterial) {
mainScene.overrideMaterial.wireframe = wireframe;
}

const object = mainScene.getObjectByName('MainObject');
if (object) {
object.traverse(child => {
if (child['material']) {
const material = child['material'];

if (Array.isArray(material)) {
for (const m of material) {
m.wireframe = wireframe;
}
} else {
material.wireframe = wireframe;
}
}
});
}
}

function onBackgroundChange(color) {
renderer.autoClearColor = true;
editorScene.background = new THREE.Color(color);
}

function animate() {
setTimeout(() => {
requestAnimationFrame(animate);
Expand All @@ -293,27 +312,17 @@ function animate() {
}

function render() {
renderer.clear();
renderer.render(editorScene, camera);
renderer.clearDepth();
renderer.render(mainScene, camera);
}

function generateMaterials(useEnvCube) {
const path = 'textures/cube/Bridge2/';
const urls = [
path + 'px.jpg', path + 'nx.jpg',
path + 'py.jpg', path + 'ny.jpg',
path + 'pz.jpg', path + 'nz.jpg'
];

const cubeTextureLoader = new THREE.CubeTextureLoader();
const reflectionCube = cubeTextureLoader.load(urls);
const refractionCube = cubeTextureLoader.load(urls);
function generateMaterials() {
const reflectionCube = loadCubeTexture('Bridge2');
const refractionCube = loadCubeTexture('Bridge2');
refractionCube.mapping = THREE.CubeRefractionMapping;

if (useEnvCube) {
editorScene.background = reflectionCube;
}

const texture = new THREE.TextureLoader().load('textures/UV_Grid_Sm.jpg');
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

Expand Down
10 changes: 8 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,15 @@
"description": "Display mesh in wireframe mode",
"default": false
},
"3dviewer.background": {
"3dviewer.backgroundImage": {
"type": "string",
"description": "Default color for the background",
"description": "Default image for the background. When set to 'none' the backgroundColor gets used.",
"default": "Bridge2",
"enum": [ "none", "Bridge2", "MilkyWay", "Pisa" ]
},
"3dviewer.backgroundColor": {
"type": "string",
"description": "Default color for the background. Only used when backgroundImage is set to 'none'",
"default": "#8f8f8f"
},
"3dviewer.boundingBox": {
Expand Down
3 changes: 2 additions & 1 deletion src/MeshViewerProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ export class MeshViewerProvider implements vscode.CustomReadonlyEditorProvider<M
const initialData = {
fileToLoad: uri.toString(),
wireframe: config.get('wireframe', false),
background: config.get('background', '#8f8f8f'),
backgroundColor: config.get('backgroundColor', '#8f8f8f'),
backgroundImage: config.get('backgroundImage', 'Bridge2'),
useEnvCube: config.get('useEnvCube', true),
boundingBox: config.get('boundingBox', false),
grid: config.get('grid', true),
Expand Down