我一直在努力尝试用Three.js绘制一个带有图案的形状。到目前为止,我已达到这一点:
var s = 0.25;
var sqLength = 80;
var squareShape = new THREE.Shape();
squareShape.moveTo( 0,0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );
var points = shape.createPointsGeometry();
var spacedPoints = shape.createSpacedPointsGeometry( 100 );
var extrudeSettings = { amount: 20, bevelThickness:1 };
var geometry = new THREE.ExtrudeGeometry( squareShape, extrudeSettings );
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture( 'textures/oak.jpg' )
});
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material ] );
mesh.position.set( x, y, z - 75 );
mesh.rotation.set( rx, ry, rz );
mesh.scale.set( s, s, s );
group.add( mesh );
但是最终渲染只会绘制与图案颜色相似的形状,而不是图案本身。我到处都没有运气。使用3D图形(例如立方体)可以相对容易地完成,但不能在2D图形上完成。任何建议将不胜感激。