Javascript 使用Three.js在形状上显示图像时出错
我尝试使用three.js r71在多面体的每个面上显示图像。我通过加载一个JSON文件来制作几何体,该文件保存定义形状的数据。我在多面体下面也设置了一个平面。我犯了一个错误,我想知道这意味着什么,或者我做错了什么。下面是我在JavaScript控制台中得到的错误消息: [.WebGLRenderingContext-0888D200]总账错误:总账操作无效: GLDraweElements:尝试访问属性1中超出范围的顶点 WebGL:错误太多,将不再向控制台报告此上下文的错误 以下是JavaScript代码:Javascript 使用Three.js在形状上显示图像时出错,javascript,json,three.js,blender,Javascript,Json,Three.js,Blender,我尝试使用three.js r71在多面体的每个面上显示图像。我通过加载一个JSON文件来制作几何体,该文件保存定义形状的数据。我在多面体下面也设置了一个平面。我犯了一个错误,我想知道这意味着什么,或者我做错了什么。下面是我在JavaScript控制台中得到的错误消息: [.WebGLRenderingContext-0888D200]总账错误:总账操作无效: GLDraweElements:尝试访问属性1中超出范围的顶点 WebGL:错误太多,将不再向控制台报告此上下文的错误 以下是JavaS
var four;
var meshFour;
var scene = new THREE.Scene();
function init() {
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//LOADING GEOMETRY
var loaderFour = new THREE.JSONLoader();
var materialsArray = [];
materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/IPT.PNG")}));
materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/Alerts.png")}));
materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/action-item-tracking.png")}));
materialsArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("./resources/images/admin.png")}));
for(var i = 0; i <= 3; i++) {
materialsArray[i].map.minFilter = THREE.LinearFilter;
}
loaderFour.load("./resources/json/tetrahedron-try.json", function (model) {
var materialFour = new THREE.MeshFaceMaterial(materialsArray);
four = new THREE.Mesh(model, materialFour);//issue according to three.js
four.translateY(1);
four.scale = new THREE.Vector3(3, 3, 3);
meshFour = THREE.SceneUtils.createMultiMaterialObject(four, materialFour);
scene.add(four);
});
camera.position.x = 20;
camera.position.y = 20;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, 10);
spotLight.castShadow = true;
scene.add(spotLight);
scene.add(plane);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
}
window.onload = init();
我也有同样的问题,但不知何故它与第71版有关。这个问题在第72版中得到了解决,尽管它还没有发布。请点击此处:
您可以找到第72个版本。在您的json文件中,您有
“uvs”:1
,它与我得到的图像一致:
因此,根据uv,您仅将一个纹理应用于两个面。
所以问题还是在于模型创建方法
这是我的fiddle()版本,它是不起作用的,因为
accesscontrolalloworigin
问题。如果您将其复制到本地,它应该可以工作。可能是因为您正在为材质指定纹理贴图,但对象没有UV坐标。什么是UV坐标?他们做什么?如果你用谷歌搜索“什么是UV坐标?”你会得到很多信息。基本上,它们是定义如何将纹理应用于对象的坐标。根据我所读的,纹理是我将应用于形状的图像,根据我所读的,我应该在三维软件中进行;但在JavaScript中,我试图在形状的每一侧动态显示图像。最后,我希望显示一个与用户选择的选项相对应的图像,这是一个复选框选项。我这样做是否正确?使用他们拥有的UV工具,通过Blender程序应用纹理,保存它;然后使用我的代码在我保存的形状上动态显示图像(无论是硬编码的还是取决于用户的输入)?一旦计算了UV坐标,就可以动态更改脸的纹理。我更改了模型创建方法(我用新的json文件替换了json文件)并复制了JavaScript。我得到了更有希望的结果,它不是两张脸上的一张图像,而是每张脸上的一张图像,但图像总是相同的;这是阵列中的第一个。您是否更新了此http://intelitrac.com/tetrahedron-third.json
因为我仍然看到旧版本。请尝试清除浏览器缓存;我很确定我把它换了。如果这样不行,请告诉我。有些计算不正确。在loader.load中添加(var i=0;i,然后将四个添加到场景中。谢谢;成功了。for循环具体在做什么?谢谢你;这将有助于将来在JSFIDLE中发布帖子。
{
"metadata": {
"type": "Geometry",
"vertices": 4,
"uvs": 1,
"faces": 4,
"generator": "io_three",
"version": 3,
"normals": 4
},
"uvs": [[0.250046,0.433025,0.749954,0.433025,0.5,0.865958,0.999907,0.865957,9.3e-05,0.865957,0.5,9.3e-05]],
"faces": [40,0,1,2,0,1,2,0,1,2,40,3,2,1,3,2,1,3,2,1,40,3,0,2,4,0,2,3,0,2,40,3,1,0,5,1,0,3,1,0],
"normals": [-0.471389,-0.333323,0.816492,-0.471389,-0.333323,-0.816492,0.942808,-0.333323,0,0,1,0],
"vertices": [-2.42416,0,4.19877,-2.42416,-0,-4.19877,4.84832,0,-0,-0,6.85655,-0],
"name": "Tetrahedron.001Geometry.3"
}