Hello everyone, I'm fairly new to utilizing three.js and I've been attempting to replicate a code snippet that I stumbled upon in an Observable notebook within a fiddle. If you're curious, here is the original code block: Despite my best efforts, all I seem to get when running the code is a large black box. I thought that I had correctly added the group materials and light elements to the scene, but all I see is darkness. Any assistance on this issue would be greatly appreciated. Below is the code that I have been working with:
canvas {
display: block;
}
initiateThree();
function initiateThree() {
data = [
[3,2,1],
[6,5,4],
[8,7,6],
]
var i =1;
height = 500
fov = 18
aspect = 500 / 500
near = 0.1
far = 1000
loader = new THREE.TextureLoader()
function update() {
cubeGroup.rotation.y += 0.001;
}
function render(scene) {
renderer.render(scene, camera);
}
const scene = new THREE.Scene(); // New Addition
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 1, 4);
cubeGeometries = data.map(row=>{
return row.map(c=>{
return new THREE.BoxGeometry( 0.2, c/8, 0.2 );
})
})
const cubeMaterial = new THREE.MeshStandardMaterial({
map:loader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
});
cubeMaterial.color.convertSRGBToLinear();
const cubeMeshes = cubeGeometries.map(row=>{
return row.map(cubeGeometry => new THREE.Mesh( cubeGeometry, cubeMaterial ))
})
// And so on...
document.body.appendChild( renderer.domElement );
}
In case you'd like to check it out for yourself, here is the link to the fiddle containing my attempt at replicating the code: https://jsfiddle.net/bullybear/m826gkrt/326/