javascript - 在 webgl 中创建类似铅笔的主体

Question

我正在尝试使用 WEBGL 创建此对象

我是 WEBGL 的初学者。我想使用我编写的代码来完成形状。到目前为止我已经创建了两个对象:圆锥体和圆柱体。这是我的圆锥体和圆柱体代码。

function Cone(resolution){
        this.name = "cone";
        this.vertices = new Float32Array(3*(resolution+2));

        this.vertices[0] = 0.0;
        this.vertices[1] = 2.0;
        this.vertices[2] = 0.0;

        var radius = 1.0;
        var angle;
        var step = 6.283185307179586476925286766559 / resolution;

        var vertexoffset = 3;

        for(var i=0; i < resolution; i++){
            angle = step*i;
            this.vertices[vertexoffset] = radius * Math.cos(angle);
            this.vertices[vertexoffset+1] = 0.0;
            this.vertices[vertexoffset+2] = radius * Math.sin(angle);
            vertexoffset +=3;
        }

        this.vertices[vertexoffset] = 0.0;
        this.vertices[vertexoffset+1] = 0.0;
        this.vertices[vertexoffset+2] = 0.0;

        this.triangleIndices = new Uint16Array(3*2*resolution);

        var triangleoffset = 0;

        for(var i=0; i < resolution; i++){
            this.triangleIndices[triangleoffset] = 0;
            this.triangleIndices[triangleoffset+1] = 1 + (i % resolution);
            this.triangleIndices[triangleoffset+2] = 1 + ((i+1) % resolution);
            triangleoffset +=3;
        }

        for(var i=0; i < resolution; i++){
            this.triangleIndices[triangleoffset] = resolution + 1;
            this.triangleIndices[triangleoffset+1] = 1 + (i % resolution);
            this.triangleIndices[triangleoffset+2] =((i+1) % resolution); 
            triangleoffset +=3;
        }

        this.numVertices = this.vertices.length/3;
        this.numTriangles = this.triangleIndices.length/3;
}

function Cylinder(resolution){
        this.name = "cylinder";
        this.vertices = new Float32Array(3*(2*resolution+2));

        this.vertices[0] = 0.0;
        this.vertices[1] = 2.0;
        this.vertices[2] = 0.0;

        var radius = 1.0;
        var angle;
        var step = 6.283185307179586476925286766559 / resolution;

        var vertexoffset = 0;

        for(var i=0; i < resolution; i++){

            angle = step*i;

            this.vertices[vertexoffset] = radius * Math.cos(angle);
            this.vertices[vertexoffset+1] = 0.0;
            this.vertices[vertexoffset+2] = radius * Math.sin(angle);

            vertexoffset +=3;
        }

        for(var i=0; i < resolution; i++){

            angle = step*i;

            this.vertices[vertexoffset] = radius * Math.cos(angle);
            this.vertices[vertexoffset+1] = 2.0;
            this.vertices[vertexoffset+2] = radius * Math.sin(angle);

            vertexoffset +=3;
        }

        this.vertices[vertexoffset] = 0.0;
        this.vertices[vertexoffset+1] = 0.0;
        this.vertices[vertexoffset+2] = 0.0;

        vertexoffset +=3;

        this.vertices[vertexoffset] = 0.0;
        this.vertices[vertexoffset+1] = 2.0;
        this.vertices[vertexoffset+2] = 0.0;



        this.triangleIndices = new Uint16Array(3*4*resolution);

        var triangleoffset = 0;

        for(var i=0; i < resolution; i++){
            this.triangleIndices[triangleoffset] = i;
            this.triangleIndices[triangleoffset+1] = (i+1) % resolution;
            this.triangleIndices[triangleoffset+2] = (i % resolution) + resolution;
            triangleoffset +=3;


            this.triangleIndices[triangleoffset] = (i % resolution) + resolution;
            this.triangleIndices[triangleoffset+1] = (i+1) % resolution;
            this.triangleIndices[triangleoffset+2] = ((i+1) % resolution) + resolution;
            triangleoffset +=3;
        }

        for(var i=0; i < resolution; i++){
            this.triangleIndices[triangleoffset] = i;
            this.triangleIndices[triangleoffset+1] = ((i+1) % resolution);
            this.triangleIndices[triangleoffset+2] =2*resolution; 
            triangleoffset +=3;
        }

        for(var i=0; i < resolution; i++){
            this.triangleIndices[triangleoffset] = resolution + i;
            this.triangleIndices[triangleoffset+1] = ((i+1) % resolution) + 
    resolution;
            this.triangleIndices[triangleoffset+2] =2*resolution +1; 
            triangleoffset +=3;
        }

        this.numVertices = this.vertices.length/3;
        this.numTriangles = this.triangleIndices.length/3;
}

我想使用这些代码并将它们组合起来完成正文!

Answer 1

如果您有一个带有(顶部和底部圆盘)的圆柱体，那么您只需更改其中一个圆盘的中心点的高度即可获得您想要的结果。

this.vertices[0] = 0.0;
this.vertices[1] = 4.0; // Change this from 2.0 to e.g 4.0
this.vertices[2] = 0.0;

参见示例:

var renderer, scene, camera, controls;

function CylinderGeometry(radius, holeRadius, height, segments, openEnded) {
    THREE.Geometry.call(this);
    this.type = 'CylinderGeometry';
    this.fromBufferGeometry(new CylinderBufferGeometry(radius, holeRadius, height, segments, openEnded));
    this.mergeVertices();
}

CylinderGeometry.prototype = Object.create(THREE.Geometry.prototype);
CylinderGeometry.prototype.constructor = CylinderGeometry;

function CylinderBufferGeometry(radius, holeRadius, height, segments, openEnded) {

    THREE.BufferGeometry.call(this);
    this.type = 'CylinderBufferGeometry';
    var scope = this;

    // buffers

    var indices = [];
    var vertices = [];
    var normals = [];
    var uvs = [];

    Cylinder(20.0);

    this.setIndex(indices);
    this.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    this.addAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
    this.addAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

    function Cylinder(resolution) {

        var radius = 1.0;
        var angle;
        var step = 6.283185307179586476925286766559 / resolution;

        var h0 = -1;
        var h1 = 0.5;
        var h2 = 2.0;

        var vertexoffset = 0;
        var uvOffset = 0;
        for(var i=0; i < resolution; i++){

            angle = step*i;

            vertices[vertexoffset] = radius * Math.cos(angle);
            vertices[vertexoffset+1] = h0;
            vertices[vertexoffset+2] = radius * Math.sin(angle);

            normals[vertexoffset] = Math.cos(angle);
            normals[vertexoffset+1] = h0;
            normals[vertexoffset+2] = Math.sin(angle);

            uvs[uvOffset] = i/resolution
            uvs[uvOffset+1] = 2.0;

            vertexoffset +=3;
            uvOffset += 2;
        }

        for(var i=0; i < resolution; i++){

            angle = step * i;

            vertices[vertexoffset] = radius * Math.cos(angle);
            vertices[vertexoffset+1] = h1;
            vertices[vertexoffset+2] = radius * Math.sin(angle);

            normals[vertexoffset] = Math.cos(angle)
            normals[vertexoffset+1] = h1;
            normals[vertexoffset+2] = Math.sin(angle);

            uvs[uvOffset] = i/resolution
            uvs[uvOffset+1] = 2.0;

            vertexoffset +=3;
            uvOffset += 2;
        }

        vertices[vertexoffset] = 0.0;
        vertices[vertexoffset+1] = h0;
        vertices[vertexoffset+2] = 0.0;
        normals[vertexoffset] = 0.0
        normals[vertexoffset+1] = -1.0;
        normals[vertexoffset+2] = 0.0;
        uvs[uvOffset] = 0.5
        uvs[uvOffset+1] = 0.5;

        vertexoffset +=3;

        vertices[vertexoffset] = 0.0;
        vertices[vertexoffset+1] = h2;
        vertices[vertexoffset+2] = 0.0;
        normals[vertexoffset] = 0.0
        normals[vertexoffset+1] = 1.0;
        normals[vertexoffset+2] = 0.0;
        uvs[uvOffset] = 0.0
        uvs[uvOffset+1] = 1.0;

        var groupOffset = 0;
        var groupCount = 0;
        var triangleoffset = 0;
        var triangleIndices = indices;
        for(var i=0; i < resolution; i++){
            triangleIndices[triangleoffset] = i;
            triangleIndices[triangleoffset+2] = (i+1) % resolution;
            triangleIndices[triangleoffset+1] = (i % resolution) + resolution;
            triangleoffset +=3;
            groupCount += 3;

            triangleIndices[triangleoffset] = (i % resolution) + resolution;
            triangleIndices[triangleoffset+2] = (i+1) % resolution;
            triangleIndices[triangleoffset+1] = ((i+1) % resolution) + resolution;
            triangleoffset +=3;
            groupCount += 3;
        }

        scope.addGroup(groupOffset, groupCount-groupOffset, 0);
        groupOffset = groupCount;

        for(var i=0; i < resolution; i++){
            triangleIndices[triangleoffset] = i;
            triangleIndices[triangleoffset+1] = ((i+1) % resolution);
            triangleIndices[triangleoffset+2] =2*resolution; 
            triangleoffset +=3;
            groupCount += 3;
        }

        for(var i=0; i < resolution; i++){
            triangleIndices[triangleoffset] = resolution + i;
            triangleIndices[triangleoffset+2] = ((i+1) % resolution) + resolution;
            triangleIndices[triangleoffset+1] =2*resolution +1; 
            triangleoffset +=3;
            groupCount += 3;
        }

        scope.addGroup(groupOffset, groupCount-groupOffset, 1);
    }
}

CylinderBufferGeometry.prototype = Object.create(THREE.BufferGeometry.prototype);
CylinderBufferGeometry.prototype.constructor = CylinderBufferGeometry;

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0x404040, 1);
    document.body.appendChild( renderer.domElement );
    window.onresize = resize;

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 3, 3, 3 );

    // controls
    controls = new THREE.OrbitControls( camera );

    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");
    var texture1 = loader.load("https://threejs.org/examples/textures/hardwood2_diffuse.jpg");
    texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
    texture1.repeat.set(2.0*Math.PI, 1.0);
    var texture2 = loader.load("https://threejs.org/examples/textures/crate.gif");
    texture2.wrapS = texture1.wrapT = THREE.RepeatWrapping;
    texture2.repeat.set(1.0, 1.0);
    
    // materials
    material_1 = new THREE.MeshBasicMaterial({
        map: texture1
        });
    material_2 = new THREE.MeshBasicMaterial({
        map: texture2
        });
    
    var geometry = new CylinderGeometry(1.0, 0.3, 0.5, 16, false);
    var mesh = new THREE.Mesh(geometry, [material_1, material_2]);
    mesh.material.side = THREE.DoubleSide;
    
    // mesh
    scene.add( mesh );

    lastTime = Date.now();
}

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 );
}

init();
animate();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>