- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个房屋几何图形并将不同的纹理附加到几何图形的表面。我正在使用 r55
。问题是带有从纹理创建的 Material 的面不会出现。然而,确实出现了具有简单颜色 Material 的面孔。如果我用简单的颜色 Material 替换从 roofTexture
生成的 Material ,使用该 Material 的面也会正确显示。
这是我的代码的相关部分:
var geom = new THREE.Geometry();
// Load the roof texture
var roofTexture = new THREE.ImageUtils.loadTexture('gfx/textures/roof.jpg');
// Let the roof texture repeat itself
roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping;
roofTexture.repeat.set(10, 10);
// Materials
var materialArray = [];
materialArray.push(new THREE.MeshLambertMaterial({color: 0xD3E3F0 }));
materialArray.push(new THREE.MeshLambertMaterial({map: roofTexture}));
// Base edges
var edge0 = new THREE.Vector2(obj.ridgeLength/2, -obj.buildingDepth/2);
var edge1 = new THREE.Vector2(obj.ridgeLength/2, obj.buildingDepth/2);
var edge2 = new THREE.Vector2(-obj.ridgeLength/2, obj.buildingDepth/2);
var edge3 = new THREE.Vector2(-obj.ridgeLength/2, -obj.buildingDepth/2);
// Floor
geom.vertices.push(new THREE.Vector3(edge0.x, -1, edge0.y));
geom.vertices.push(new THREE.Vector3(edge1.x, -1, edge1.y));
geom.vertices.push(new THREE.Vector3(edge2.x, -1, edge2.y));
geom.vertices.push(new THREE.Vector3(edge3.x, -1, edge3.y));
// Eave
geom.vertices.push(new THREE.Vector3(edge0.x, obj.eaveHeight, edge0.y));
geom.vertices.push(new THREE.Vector3(edge1.x, obj.eaveHeight, edge1.y));
geom.vertices.push(new THREE.Vector3(edge2.x, obj.eaveHeight, edge2.y));
geom.vertices.push(new THREE.Vector3(edge3.x, obj.eaveHeight, edge3.y));
// Ridge
geom.vertices.push(new THREE.Vector3(obj.ridgeLength/2, obj.ridgeHeight, 0));
geom.vertices.push(new THREE.Vector3(-obj.ridgeLength/2, obj.ridgeHeight, 0));
// Ground
geom.faces.push( new THREE.Face4(0, 0, 0, 0) );
// Front
geom.faces.push( new THREE.Face4(0, 3, 7, 4) );
// Left side
geom.faces.push( new THREE.Face4(0, 4, 5, 1) );
// Back
geom.faces.push( new THREE.Face4(1, 5, 6, 2) );
// Right side
geom.faces.push( new THREE.Face4(2, 6, 7, 3) );
// Left triangle
geom.faces.push( new THREE.Face3(4, 8, 5));
// Right triangle
geom.faces.push( new THREE.Face3(6, 9, 7));
// Front roof
geom.faces.push( new THREE.Face4(7, 9, 8, 4) );
// Back roof
geom.faces.push( new THREE.Face4(5, 8, 9, 6) );
// Assign materials to the faces
geom.faces[0].materialIndex = 0;
geom.faces[1].materialIndex = 0;
geom.faces[2].materialIndex = 0;
geom.faces[3].materialIndex = 0;
geom.faces[4].materialIndex = 0;
geom.faces[5].materialIndex = 0;
geom.faces[6].materialIndex = 0;
geom.faces[7].materialIndex = 1;
geom.faces[8].materialIndex = 1;
geom.computeFaceNormals();
obj.house = new THREE.Mesh( geom, new THREE.MeshFaceMaterial(materialArray) );
obj.house.doubleSided = true;
obj.house.castShadow = true;
obj.sun.shadowDarkness = 1.0;
obj.scene.add(obj.house);
我做错了什么?
最佳答案
您缺少几何体上的 UV 坐标。 UV 坐标从 0 到 1,因此由于您自己创建几何体,您可以在左下角分配 UV (0.0, 0.0)、右下角 (1.0, 0.0)、左上角 (0.0, 1.0) 和右上角 ( 1.0, 1.0).您可以查看 PlaneGeometry.js 文件以了解 UV 的分配方式。
关于javascript - 具有自定义几何体的网格的 Three.js 纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14716128/
我想计算一条线之间的交点: l := direction * x + origin for x e R or x e [0,R+) 和默认的 Boost 多边形。在文档中我只发现了与线段(固定起点和终
我有一个 blender 文件,我将其导出为 DAE/collada,然后使用 Xcode 将其转换为 Scenekit 的场景文件。我在使用场景文件中的几何体时遇到问题。 场景文件(“model.s
我正在开发一些用于生成 3D 模型的 webgl 软件,并且依赖于动态几何。我观察到了一些非常奇怪的行为,我已经能够在 this jsfiddle 中隔离这些行为。 . 似乎在将几何体实例添加到场景后
我们正在尝试构建“编辑 handle ”,允许用户通过在 8 个位置(4 个 Angular + 4 个边)之一拖动来调整(投影)平面的大小。这种调整大小应该只在拖动的方向上缩放/拉伸(stretch
我创建了一个渲染四边形的简单程序 初始化: Math::float3 vertices[4]; vertices[0] = Math::float3(-0.5f, 0.5f, -1.0f); vert
这里是定义我的简单 3D 几何体的点。 datN = {{{-0.47150460764747554`, 0.29559274991660417`, 0.010131794240974218`},
有没有办法在 3d 中定义形状 var x = 0, y = 0, z=0 ; var heartShape = 新三。 形状 (); heartShape.moveTo( x + 25, y + 2
我正在使用网络 worker 加载动画 3D 模型的 .json 文件。对于每个大数组(顶点、法线等),我将一个 Float32Array 缓冲区传输回 UI 线程。由于此类缓冲区是 transfer
我是一名优秀的程序员,十分优秀!