Public
Edited
Nov 13, 2023
Fork of Three.js
10 forks
2 stars
Insert cell
Insert cell
Insert cell
genererFigures = {
const figures = [];
const features = { Name: "" };

// you can't import anything from outside (no functions or libraries)
// you should not produce any collateral effect
// You have access to fxrand()

// if you are unsure of the scale, make all geometry sizes and positions related
// to a constant;

// you can use the anaverse bool to decide if a function has to be executed in
// anaverse or out of it.
// In the anaverse, there is a global (worker-wide) constant as
// const anaverse = true;
//

// ------ your code starts here ------

// Here the variable u is the unit used to scale
const u = 1;

//simple cube

const cube = {
geometry: {
type: "BoxGeometry", // Type of geometry
args: [
// Arguments relevant to the geometry (check THREE API)
(0.1 + fxrand() * 0.5) * u, // Cube width
(0.1 + fxrand() * 0.5) * u, // Cube height
(0.1 + fxrand() * 0.5) * u // Cube depth
]
},
pos: {
// Position
x: (-0.5 + fxrand() * 1) * u,
y: (-0.5 + fxrand() * 1) * u,
z: (-0.5 + fxrand() * 1) * u
},
rot: {
// Rotation
x: 0,
y: 0,
z: 0
},
lines: true, // Display color segments (like wireframe, but faces not triangles)
hatch: true, // Fill with white texture
full: false // Fill with color texture (in the anaverse, red and cyan)
};

figures.push(cube);

// ------ your code ends here ------

return { figures, features };
}
Insert cell
Insert cell
Insert cell
fxrand()
Insert cell
Insert cell
Insert cell
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);

//manufacture
genererFigures.figures.forEach((fig) => {
var geometry = new THREE[fig.geometry.type](...fig.geometry.args);
var edgeGeometry = new THREE.EdgesGeometry(geometry);

geometry.center();

var pos = new THREE.Vector3(fig.pos.x, fig.pos.y, fig.pos.z);
var rot = new THREE.Vector3(fig.rot.x, fig.rot.y, fig.rot.z);
if (fig.scale) {
var scale = new THREE.Vector3(fig.scale.x, fig.scale.y, fig.scale.z);
}

if (fig.lines) {
const line = new THREE.LineSegments(edgeGeometry, lineMaterial);
line.position.set(pos.x, pos.y, pos.z);
line.rotation.set(rot.x, rot.y, rot.z);
if (fig.scale) {
line.scale.set(scale.x, scale.y, scale.z);
}
scene.add(line);
}

if (fig.hatch) {
const hatch = new THREE.Mesh(geometry, hatchMaterial);
hatch.position.set(pos.x, pos.y, pos.z);
hatch.rotation.set(rot.x, rot.y, rot.z);
if (fig.scale) {
hatch.scale.set(scale.x, scale.y, scale.z);
}
scene.add(hatch);
}

if (fig.full) {
const full = new THREE.Mesh(geometry, fullMaterial);
full.position.set(pos.x, pos.y, pos.z);
full.rotation.set(rot.x, rot.y, rot.z);
if (fig.scale) {
full.scale.set(scale.x, scale.y, scale.z);
}
scene.add(full);
}
});

return scene;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more