这是我第二次使用three.js,而且我已经玩了至少3个小时。我似乎无法找到方向。
我应该建立的是这样的: https://www.g-star.com/nl_nl/newdenimarrivals
我创建了场景和所有内容,但我似乎无法找到关于如何安排这类产品的公式或任何内容(更不用说我之后必须处理点击事件并将相机移动到该产品)。 / p>
你们有任何线索或任何东西吗?
修改
这是我尝试安排产品的方式。
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个透明的同心圆柱体并将产品放在每个(随机位置)上,并将相机放在所有气体的中心并旋转。 Buut,我如何随机将图像放在cilinider上?我确实有阻挡