那些遇到过的问题

用颜色填充线条之间的区域 - Three.js

Lir*_*anC 5 javascript three.js

我有一系列线条，我需要用颜色为线条下方或线条之间的所有区域着色。

为简单起见，我创建了一个带有封闭线的片段。实际上，我有一个绘制多条线的程序（如股票市场图表），我需要为图表下方的所有区域着色。另请参见屏幕截图。

我会很感激我可能需要采取的任何帮助甚至新方法。

在此处输入图片说明

<html>

<head>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <script src="https://threejs.org/build/three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        function createLine(startX,startY,endX,endY) {
            const geometry = new THREE.Geometry();
            geometry.vertices.push(new THREE.Vector3(startX, startY, 0));
            geometry.vertices.push(new THREE.Vector3(endX, endY, 0));
            const material = new THREE.LineBasicMaterial({
                color: 0xffffff
            });
            return new THREE.Line(geometry, material);
        }
        scene.add(createLine(0,0,1,0));
        scene.add(createLine(1,0,1,1));
        scene.add(createLine(1,1,0,1));
        scene.add(createLine(0,1,0,0));

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

Rab*_*d76 6

您可以使用THREE.Shape和THREE.ShapeGeometry通过以下方式绘制填充多边形THREE.Mesh：

function createPolygon( poly ) {
    var shape = new THREE.Shape();
    shape.moveTo( poly[0][0], poly[0][1] );
    for (var i = 1; i < poly.length; ++ i)
        shape.lineTo( poly[i][0], poly[i][1] );
    shape.lineTo( poly[0][0], poly[0][1] );

    var geometry = new THREE.ShapeGeometry( shape );
    var material = new THREE.MeshBasicMaterial( {
        color: 0x800000
    } );
    return new THREE.Mesh(geometry, material);
}

var poly = [[0,1],[0.25,0],[0.5,0.5],[0.75,0],[1,1]];
scene.add(createPolygon(poly))
Run Code Online (Sandbox Code Playgroud)


看例子：

function createPolygon( poly ) {
    var shape = new THREE.Shape();
    shape.moveTo( poly[0][0], poly[0][1] );
    for (var i = 1; i < poly.length; ++ i)
        shape.lineTo( poly[i][0], poly[i][1] );
    shape.lineTo( poly[0][0], poly[0][1] );

    var geometry = new THREE.ShapeGeometry( shape );
    var material = new THREE.MeshBasicMaterial( {
        color: 0x800000
    } );
    return new THREE.Mesh(geometry, material);
}

var poly = [[0,1],[0.25,0],[0.5,0.5],[0.75,0],[1,1]];
scene.add(createPolygon(poly))
Run Code Online (Sandbox Code Playgroud) 
var renderer, scene, camera, controls;

init();
animate();

function createLine(startX,startY,endX,endY) {
    const geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(startX, startY, 0));
    geometry.vertices.push(new THREE.Vector3(endX, endY, 0));
    const material = new THREE.LineBasicMaterial({
        color: 0xffffff
    });
    return new THREE.Line(geometry, material);
}

function createPolygon( poly ) {
  var shape = new THREE.Shape();
  shape.moveTo( poly[0][0], poly[0][1] );
  for (var i = 1; i < poly.length; ++ i)
    shape.lineTo( poly[i][0], poly[i][1] );
  shape.lineTo( poly[0][0], poly[0][1] );
    
  var geometry = new THREE.ShapeGeometry( shape );
    var material = new THREE.MeshBasicMaterial( {
        color: 0x800000
    } );
    return new THREE.Mesh(geometry, material);
}

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    //camera.position.set( 20, 20, 20 );
    camera.position.z = 5;
    window.onresize = resize;

    var light = new THREE.HemisphereLight( 0xeeeeee, 0x888888, 1 );
	  light.position.set( 0, 20, 0 );
	  scene.add( light );
    
    var poly = [[0,1],[0.25,0],[0.5,0.5],[0.75,0],[1,1]];
    
    scene.add(createPolygon(poly))
    
    for (var i = 0; i < poly.length-1; ++i)
    {
        var i2 = i<poly.length-1 ? i+1 : 0 
        scene.add(createLine(poly[i][0],poly[i][1],poly[i2][0],poly[i2][1]));
    }
}

function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
}

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
Run Code Online (Sandbox Code Playgroud) 
body {
    margin: 0;
}

canvas {
    width: 100%;
    height: 100%
}
Run Code Online (Sandbox Code Playgroud)

pri*_*849 6

在此处输入图片说明

要用颜色填充它，您必须使用带有面的几何体 ( THREE.Face3())。要拥有它，您需要对一个形状进行三角测量或使用现有的几何图形，以满足您的需要，并对其顶点进行一些更改。

下面，有一个非常粗糙的概念，使用现有的几何形状（THREE.PlaneGeometry()），其颜色的图形区域的下方。但是请记住，当您需要在一张图中仅显示正值或仅显示负值时，可以使用这种方法，否则，结果会看起来很奇怪（或者说丑陋）。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 2, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var points = [],
  pointCount = 21;
var plane, line;

scene.add(new THREE.GridHelper( pointCount - 1, pointCount -1 ));

for (let i = 0; i < pointCount; i++) {
  points.push({
    initValue: THREE.Math.randFloat(-1, 1),
    amplitude: THREE.Math.randFloat(1, 2),
    speed: THREE.Math.randFloat(.5, 2)
  });
}

createGraph( pointCount );

function createGraph( pointCount ) {
  var planeGeom = new THREE.PlaneGeometry(pointCount - 1, 1, pointCount - 1, 1);
  planeGeom.translate(0, .5, 0);

  plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
    color: "red",
    wireframe: false,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: .75
  }));
  scene.add(plane);

  var lineGeom = new THREE.Geometry();
  for (let i = 0; i < plane.geometry.parameters.widthSegments + 1; i++) {
    lineGeom.vertices.push(planeGeom.vertices[i]); // share the upper points of the plane
  }
  line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({
    color: "aqua"
  }));
  plane.add(line);
}


var time = 0;

render();

function render() {
  time = Date.now() * .001;
  requestAnimationFrame(render);
  points.forEach( ( p, idx ) => {
    plane.geometry.vertices[idx].y = 2.5 + Math.sin( (time + p.initValue) * p.speed) * p.amplitude;  // the trick is that indices of upper vertices are from 0 to N consequently in row (r87),
    // thus we can assign the data from the `points` array to their Y-coordinates to form the graph
  });
  plane.geometry.verticesNeedUpdate = true; // the most important thing when you change coordiantes of vertices
  line.geometry.verticesNeedUpdate = true; // the most important thing when you change coordiantes of vertices
  renderer.render(scene, camera);
}
Run Code Online (Sandbox Code Playgroud) 
body {
  overflow: hidden;
  margin: 0;
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2903 次

最近记录：

7 年，7 月 前
相关归档
获取屏幕大小,当前网页和浏览器窗口 1927
如何在没有事件的情况下获得鼠标位置(不移动鼠标)？ 263
最简单的SOAP示例 235
如何使Twitter引导工具提示有多行？ 154
NodeJS:如何获取服务器端口？ 125
AngularJS指令限制A对E 112
使用jQuery在失败时重试AJAX请求的最佳方法是什么？ 92
Javascript/DOM:如何删除DOM对象的所有事件？ 73
数字键盘的keyCode值？ 66
Javascript:RegExp.compile()有什么意义？ 51
难疑归档
如何删除子模块？ 3366
做一个"git export"(比如"svn export")？ 2312
如何使用Git将标签推送到远程存储库？ 2091
什么是MVP和MVC,有什么区别？ 2081
带请求正文的HTTP GET 1896
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
如何知道对象在Python中是否具有属性 1491
从客户端检测到潜在危险的Request.Form值 1437
JavaScript中是否有"null coalescing"运算符？ 1305