使用three.js的Javascript 3D效果答案

【问题标题】：Javascript 3D Effect using three.js使用three.js的Javascript 3D效果
【发布时间】：2014-09-19 22:42:18
【问题描述】：

这是我第二次使用 three.js，我已经玩了至少 3 个小时。我似乎找不到方向。

我应该构建的是这样的： https://www.g-star.com/nl_nl/newdenimarrivals

我创建了场景和所有内容，但我似乎找不到关于如何安排此类产品的公式或任何内容（更不用说我必须在之后处理点击事件并将相机移动到该产品）。

你们有什么线索吗？

编辑：

这就是我尝试安排产品的方式。

    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);
        });
    },

编辑 2：

我想通了：我需要添加大约 5 个透明的同心圆柱体并将产品放在每个（随机位置）上，并将相机放在所有圆柱体的中心并旋转。但是，我如何将图像随机放在 cilinider 上？我真的对此感到困惑

【问题讨论】：

标签： javascript 3d three.js effects

【解决方案1】：

在three.js website 上，您可以找到a whole bunch of examples，它可以向您展示什么是可能的以及如何做到这一点。不要期望在 3 小时内成为专家。

【讨论】：