0

有没有一种方法可以将纹理渲染到没有网格的平面对象上，或者看起来像一个平面？在此示例中，彩色区域是使用激光扫描仪创建的多条线绘制的一种形状。我希望它只有一个统一的纹理而不是几个面。谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TruViewTest</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            position: absolute;
            top: 0px;
            width: 100%;
            padding: 5px;
            text-align:center;
        }
    </style>
</head>
<body>
    <canvas id="debug" style="position:absolute; left:100px"></canvas>

    <script src="../build/three.min.js"></script>

    <script>

var camera, scene, renderer;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 150, 500);

scene = new THREE.Scene();

parent = new THREE.Object3D();
parent.position.y = 50;
scene.add(parent);

var slabTexture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener('load', function (event) {

    slabTexture.image = event.content;
    slabTexture.needsUpdate = true;

});
loader.load('textures/slabs/Small Files-Collage/RCRANBROWN3-10017_LKWD-small.jpg');

function addShape(shape, color, lncolor, x, y, z, rx, ry, rz, s) {

    // flat shape

    var geometry = new THREE.ShapeGeometry(shape);
    var material = new THREE.MeshBasicMaterial({
        map: color,
        overdraw: true
    });

    geometry.faceUvs = [
        []
    ];
    geometry.faceVertexUvs = [
        []
    ];

    for (var f = 0; f < geometry.faces.length; f++) {

        var faceuv = [
        new THREE.Vector2(0, 1),
        new THREE.Vector2(1, 1),
        new THREE.Vector2(1, 0),
        new THREE.Vector2(0, 0)];

        geometry.faceUvs[0].push(new THREE.Vector2(0, 1));
        geometry.faceVertexUvs[0].push(faceuv);
    }
    var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new THREE.MeshBasicMaterial({
        color: 0x000000,
        wireframe: true,
        transparent: true,
        overdraw: true
    })]);

    //var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(x, y, z);
    mesh.rotation.set(rx, ry, rz);
    mesh.scale.set(s, s, s);
    parent.add(mesh);

    // line

    var geometry = shape.createPointsGeometry();
    var material = new THREE.LineBasicMaterial({
        linewidth: 2,
        color: lncolor,
        transparent: true
    });

    var line = new THREE.Line(geometry, material);
    line.position.set(x, y, z);
    line.rotation.set(rx, ry, rz);
    line.scale.set(s, s, s);
    parent.add(line);

}

// Top
var TopShape = new THREE.Shape();
TopShape.moveTo(-383748, 422610);
TopShape.lineTo(-311945, 422414);
TopShape.lineTo(-95342, 422937);
TopShape.lineTo(79708, 423298);
TopShape.lineTo(228392, 422665);
TopShape.lineTo(411795, 422243);
TopShape.lineTo(567713, 419246);
TopShape.lineTo(637244, 420570);
TopShape.lineTo(636393, 266943);
TopShape.lineTo(635691, 104201);
TopShape.lineTo(635072, 10155);
TopShape.lineTo(396204, 8753);
TopShape.lineTo(396728, 150015);
TopShape.lineTo(-373284, 150015);
TopShape.lineTo(-373612, -480088);
TopShape.lineTo(-649288, -479927);
TopShape.lineTo(-649960, -262722);
TopShape.lineTo(-650305, -12511);
TopShape.lineTo(-650165, 162285);
TopShape.lineTo(-649661, 305543);
TopShape.lineTo(-648809, 422951);
TopShape.lineTo(-438166, 422758);
TopShape.lineTo(-383748, 422610);



// addShape( shape, color, x, y, z, rx, ry,rz, s );
addShape(TopShape, slabTexture, 0x333333, 60, 100, 0, 0, 0, 0, .0005);

renderer = new THREE.CanvasRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.sortObjects = false;
//renderer.sortElements = false;
container.appendChild(renderer.domElement);

//

window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
requestAnimationFrame(animate);
render();
}

function render() {
renderer.render(scene, camera);
}
    </script>
</body>
</html>
4

0 回答 0