Computer Engineering student at UFRJ.
animation = {
if (rotInfo) {
let { type, row, col, angle } = rotInfo;
let anims = [];
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
let c = cubes[i][j];
let [rx, ry, rz] = [0, 0, 0];
if(type==='row'){
if(j===row){
[rx, ry, rz] = [rx , ry + angle * (Math.PI/180), rz ]
}
}
if(type==='col'){
if(i===col){
[rx, ry, rz] = [rx + angle * (Math.PI/180), ry, rz ]
}
}
if(type==='allrow'){
[rx, ry, rz] = [rx , ry + angle * (Math.PI/180), rz ]
}
if(type==='allcol'){
[rx, ry, rz] = [rx + angle * (Math.PI/180), ry, rz ]
}
let rot = new THREE.Quaternion().setFromEuler(
new THREE.Euler(rx, ry, rz)
);
if(type==='reset'){
anims.push({
q: c.quaternion,
oldq: c.quaternion.clone(),
newq: c.quaternion.clone().identity()
});
}
else{
anims.push({
q: c.quaternion,
oldq: c.quaternion.clone(),
newq: c.quaternion.clone().premultiply(rot)
});
}
}
}
for (let i = 0; i < 60; i++) {
for (let { q, oldq, newq } of anims) {
q.slerpQuaternions(oldq, newq, i / 59);
}
render();
yield i;
}
mutable rotInfo = null;
}
}
function createCube(x = 0, y = 0, z = 0, l = 1) {
let geometry = new THREE.BoxGeometry(l, l, l);
let material = new THREE.MeshStandardMaterial({ color: 0xCC0000 });
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y, z);
return mesh;
}
function createCubeTex(x = 0, y = 0, z = 0, l = 1) {
let geometry = texCubeGeometry;
let material = new THREE.MeshStandardMaterial({
color: 0xffffff,
map: new THREE.CanvasTexture(textureImage)
});
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y, z);
return mesh;
}
import { texCubeGeometry, textureImage } from "@esperanc/textured-box"
images = [
await FileAttachment("img1.jpg").image(),
await FileAttachment("img2.jpg").image(),
await FileAttachment("img3.jpg").image(),
await FileAttachment("img4.jpg").image(),
await FileAttachment("img5.jpg").image(),
await FileAttachment("img6.jpg").image()
]
function createCubeTile(x = 0, y = 0, z = 0, l = 1,i,j) {
const group = new THREE.Group();
const geometry = new THREE.PlaneGeometry();
let tex, material = null;
const planes = [];
for (let k = 0; k <6; k++){
tex = new THREE.CanvasTexture(images[k]);
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
if (k==2||k==5){
tex.offset.set(i/4, (j+1)/4);
tex.repeat.set(1/4, -1/4);
} else {
tex.offset.set(i/4, j/4);
tex.repeat.set(1/4, 1/4);
}
material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
map: tex
});
planes.push(new THREE.Mesh(geometry, material));
}
planes[0].position.set(0,0,0.5);
planes[1].position.set(0,0,-0.5);
planes[2].position.set(0,0.5,0);
planes[3].position.set(0,-0.5,0);
planes[4].position.set(0.5,0,0);
planes[5].position.set(-0.5,0,0);
planes[2].rotation.set(Math.PI/2,0,0);
planes[3].rotation.set(Math.PI/2,0,0);
planes[4].rotation.set(0,Math.PI/2,0);
planes[5].rotation.set(Math.PI,Math.PI/2,0);
for (let k in planes){
group.add(planes[k]);
}
group.position.set(x/2,y/2,z/2)
return group;
}
cubes = {
const m = 4;
const n = 4;
const w = 6.1;
const h = 6.1
let cubes = [];
for (let i = 0; i < m; i++) {
cubes.push([]);
let x = w * (i / (m - 1) - 0.5);
for (let j = 0; j < n; j++) {
let y = h * (j / (n - 1) - 0.5);
cubes[i].push(
variant === "textured"
? createCubeTex(x, y, 0, w / (m - 1) - 0.04)
: variant === "plain"
? createCube(x, y, 0, w / (m - 1) - 0.04)
: createCubeTile(x, y, 0, w / (m - 1) - 0.04, i, j)
);
cubes[i].ij = [i, j];
}
}
return cubes;
}
cubeGroup = {
let cubeGroup = new THREE.Group();
for (let i = 0; i < cubes.length; i++)
for (let j = 0; j < cubes[0].length; j++) cubeGroup.add(cubes[i][j]);
return cubeGroup;
}
scene = {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xCCCCCC);
scene.add(cubeGroup)
scene.add(light)
return scene
}
controls = new THREE.OrbitControls(camera, renderer.domElement)
function render () {
controls.update();
renderer.render(scene, camera);
}
{
for (;;) {
render();
yield;
}
}
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.
