I'm navigating my second round with three.js and have been experimenting for a good 3 hours. However, I seem to be at a loss when it comes to determining my next steps.
My goal is to create something similar to the layout found here:
I've managed to set up the scene and all, but am struggling to find a method to arrange the products as seen on the website (not to mention implementing click events and camera movement towards the selected product).
Any suggestions or leads would be greatly appreciated!
EDIT:
Here's how I've attempted to arrange the products:
arrangeProducts: function () {
var self = this;
this.products.forEach(function (element, index) {
THREE.ImageUtils.crossOrigin = '';
element.image = 'http://i.imgur.com/CSyFaYS.jpg';
//texture
var texture = THREE.ImageUtils.loadTexture(element.image, null);
texture.magFilter = THREE.LinearMipMapLinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
//material
var material = new THREE.MeshBasicMaterial({
map: texture
});
//plane geometry
var geometry = new THREE.PlaneGeometry(element.width, element.height);
//plane
var plane = new THREE.Mesh(geometry, material);
plane.overdraw = true;
//set the random locations
/*plane.position.x = Math.random() * (self.container.width - element.width);
plane.position.y = Math.random() * (self.container.height - element.height);*/
plane.position.z = -2500 + (Math.random() * 50) * 50;
plane.position.x = Math.random() * self.container.width - self.container.width / 2;
plane.position.y = Math.random() * 200 - 100;
//add the plane to the scene
self.scene.add(plane);
});
},
EDIT 2:
I've realized that I need to incorporate around 5 transparent concentric cylinders, place the products at random locations on each one, and position the camera in the center to rotate. However, I'm stuck on how to randomly place the images on the cylinders. Any insights on this would be incredibly helpful!