Three.js - 在 JSON 对象上显示图像
Three.js - Displaying images on a JSON object
我使用的是库的 71 版。我正在尝试在 3D 对象(通过 Blender 制作)的每个面上显示图像。无论是通过不同的图像还是重复使用一张图像都不重要。该对象在实例化为 JSONLoader 后通过加载函数加载。下面是加载json文件的例子。在本例中,形状是一个立方体,有六个面。有没有办法修改以下代码来实现这一点?
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshNormalMaterial();
six = new THREE.Mesh(model, materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
meshSix = THREE.SceneUtils.createMultiMaterialObject(six, materialSix);
});
1) 如果你正在加载材料,并且已经有了几何图形,那么你是否尝试过"MeshFaceMaterial" (docs)?
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshFaceMaterial("your materials array: model");
six = new THREE.Mesh("your cube geometry", materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
});
2) 如果你正在加载对象,那么添加不同的图像也是一个选项"MeshFaceMaterial",类似的例子here。我修改了该代码以适应这种情况:
var image;
var materials = [];
for (var i=0; i<6; i++) {
image = "./resources/images/"+fileName+".png"
materials.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(image)}));
}
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshFaceMaterial(materials);
six = new THREE.Mesh(model, materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
});
我使用的是库的 71 版。我正在尝试在 3D 对象(通过 Blender 制作)的每个面上显示图像。无论是通过不同的图像还是重复使用一张图像都不重要。该对象在实例化为 JSONLoader 后通过加载函数加载。下面是加载json文件的例子。在本例中,形状是一个立方体,有六个面。有没有办法修改以下代码来实现这一点?
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshNormalMaterial();
six = new THREE.Mesh(model, materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
meshSix = THREE.SceneUtils.createMultiMaterialObject(six, materialSix);
});
1) 如果你正在加载材料,并且已经有了几何图形,那么你是否尝试过"MeshFaceMaterial" (docs)?
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshFaceMaterial("your materials array: model");
six = new THREE.Mesh("your cube geometry", materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
});
2) 如果你正在加载对象,那么添加不同的图像也是一个选项"MeshFaceMaterial",类似的例子here。我修改了该代码以适应这种情况:
var image;
var materials = [];
for (var i=0; i<6; i++) {
image = "./resources/images/"+fileName+".png"
materials.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(image)}));
}
var loaderSix = new THREE.JSONLoader();
loaderSix.load("./resources/json/six.json", function (model) {
var materialSix = new THREE.MeshFaceMaterial(materials);
six = new THREE.Mesh(model, materialSix);
six.translateY(1);
six.scale = new THREE.Vector3(3, 3, 3);
});