hi everyone,
i’m developing a 3D + 2D web operating system (a step up from a CMS i can tell you).
now, i want to display files as cubes (no problems there[2]), and folders as DodeCahedronGeometry instances with a custom material.
i’ve uploaded my sources;
depth: sideLength,
bevelEnabled: true,
bevelThickness: 40,
bevelSize: 40,
bevelOffset: 0,
bevelSegments: 40
};
//var geometry = new THREE.DodecahedronGeometry(10);
var g = new THREE.DodecahedronGeometry(5);
const base = new THREE.Vector2(0, 0.5);
const center = new THREE.Vector2();
const angle = THREE.MathUtils.degToRad(72);
var baseUVs = [
base.clone().rotateAround(center, angle * 1).addScalar(0.5),
base.clone().rotateAround(center, angle * 2).addScalar(0.5),
base.clone().rotateAround(center, angle * 3).addScalar(0.5),
base.clone().rotateAround(center, angle * 4).addScalar(0.5),
base.clone().rotateAround(center, angle * 0).addScalar(0.5)
which gets used here :
opacity : 0.5,
transparent : true
})
];
if (it.parent) {
// parent/current folder :
if (it.name.match(/\.mp3$/)) {
var cube = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300 ), materials2 );
} else {
var cube = new THREE.Mesh( g, m );
}
cube.it = it;
cube.position.x = it.model.position.x;
cube.position.y = it.model.position.y;
cube.position.z = it.model.position.z;
t.scene.remove(it.model);
//if (it.name.match('SABATON')) debugger;
it.model = cube;
t.scene.add( cube );
t.s2.push(cube);
live demo is up at NicerApp WebOS Unified Interface GitHub - NicerEnterprises/NicerApp-WebOS-v6.y.z as well.
i’m new to the threejs world, but i am really committed towards becoming the first guy offering a true 3D + 2D WebOS.
What appears when you console log the DodecahedronGeometry mesh? Do the scale and size has reasonable values? Is both the geometry and the material defined?
In the shared snippets it looks like you’re creating a BoxGeometry of size 300x300x300, but DodecahedronGeometry with just the default size of 1x1x1.
hofk
January 16, 2024, 11:25am
3
ok, you were right about the scaling… my world is 100 * 1000 large because i want to work with detailed textures even when zoomed in on details btw.
var g = new THREE.DodecahedronGeometry(250);
next problem : there’s no easy way to specify the color of the DodecahedronGeometry
}
t.onresize_postDo(t, true);
}
createTexture(){
let c = document.createElement("canvas");
let step = 64;
c.width = step * 16;
c.height = step;
let ctx = c.getContext("2d");
ctx.fillStyle = "#7f7f7f";
ctx.fillRect(0, 0, c.width, c.height);
ctx.font = "40px Arial";
ctx.textAlign = "center";
ctx.fillStyle = "aqua";
ctx.textBaseline = "middle";
for (let i = 0; i < 12; i++){
ctx.fillText(i + 1, step * 0.5 + step * i, step * 0.5);
}
Not sure what you mean, world scale is unrelated to texture quality. Texture applied to 1x1x1 geometry will look the same as a texture applied to a 100x100x100 geometry after rasterization
You can apply colors using materials - geometries on their own do not have colors etc. You can make material transparent by setting .transparent = true and setting .opacity to a value below 1.0.
i tried your solution for the materials, but unfortunately it doesn’t work yet…
baseUVs[0].x, baseUVs[0].y
);
sides.push(i, i, i, i, i, i, i, i, i);
};
g.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
g.setAttribute("sides", new THREE.Float32BufferAttribute(sides, 1));
var m = new THREE.MeshStandardMaterial({
roughness: 0.25,
metalness: 0.75,
map: t.createTexture(),
onBeforeCompile: shader => {
shader.vertexShader = `
attribute float sides;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
`
#include <uv_vertex>
vUv.x = (1./16.) * (vUv.x + sides);
opacity : 0.5,
transparent : true
})
];
if (it.parent) {
// parent/current folder :
if (it.name.match(/\.mp3$/)) {
var cube = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300 ), materials2 );
} else {
var cube = new THREE.Mesh( g, m );
}
cube.it = it;
cube.position.x = it.model.position.x;
cube.position.y = it.model.position.y;
cube.position.z = it.model.position.z;
t.scene.remove(it.model);
//if (it.name.match('SABATON')) debugger;
it.model = cube;
t.scene.add( cube );
t.s2.push(cube);
The material.color is multiplied with whatever texture color you have assigned. Try removing the texture and see if material.color works correctly… if it does, then try adding texture back.
i removed map: from the material instance setup code, .color still doesn’t work
the meshes stay black and semi-transparent.
baseUVs[0].x, baseUVs[0].y
);
sides.push(i, i, i, i, i, i, i, i, i);
};
g.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
g.setAttribute("sides", new THREE.Float32BufferAttribute(sides, 1));
var m = new THREE.MeshStandardMaterial({
//roughness: 0.25,
//metalness: 0.75,
color : '0x0000FF',
emissive : '0x00ff00',
opacity : 0.5,
//map : t.createTexture(),
transparent : true,
/*onBeforeCompile: shader => {
shader.vertexShader = `
attribute float sides;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
ok, the solution turned out to be real simple… don’t use 0x0000FF, use #0000FF for the ‘emissive’ color
);
sides.push(i, i, i, i, i, i, i, i, i);
};
g.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
g.setAttribute("sides", new THREE.Float32BufferAttribute(sides, 1));
var m = new THREE.MeshStandardMaterial({
//roughness: 0.25,
//metalness: 0.75,
color : '#0000FF',
emissive : '#00FF00',
opacity : 0.5,
//map : t.createTexture(),
transparent : true
/*onBeforeCompile: shader => {
shader.vertexShader = `
attribute float sides;
${shader.vertexShader}
`.replace(
`#include <uv_vertex>`,
`
Well, you can use 0x0000ff, if you don’t put ' around it, turning it into a string, whereas it needs to be a hex number. 0x0000ff and '0x0000ff' are different things.
3 Likes
Scale affects only size of one object relative to other objects - the only thing affecting texture quality is the resolution and anisotropy of the texture.