使用three.js的Javascript 3D效果

Question

This is my second time using three.js and I've been playing around for at least 3 hours. I cannot seem to find a direction.

What I should build is something like this: https://www.g-star.com/nl_nl/newdenimarrivals

I created the scene and everything, but I cannot seem to find a formula or anything on how to arrange the products like that (not to mention that I have to handle click events afterwards and move the camera to that product).

Do you guys have any leads or anything?

EDIT:

This is how I try 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 figured out: I need to add about 5 transparent concentric cilinders and put the products on each (random location) and have the camera in the center of all the cilinders and just rotate. Buut, how do I put the images on the cilinider randomly? I really have a blockout on that

Answer 1

On the three.js website you find a whole bunch of examples that can show you what is possible and how to do it. Don't expect to be an expert in only 3 hours.