Question

我在线框中创建一个球体对象，但是当我想要定义顶点并为创建的线框球体对象应用back-face culling时，我陷入困境。
有人可以帮忙吗？以及如何为线框球体对象定义顶点？

我的HTML文件：我正在使用three.js库，因为我是WebGL的新手。我无法解决此问题。

<html>
    <head>
        <title> Construct a sphere model in WebGL </title>
        <script src ="./three.js-master/three.js-master/build/three.js"></script>
        <script src ="./three.js-master/three.js-master/build/three.min.js"></script>
        <script type="text/javascript" src="Three.js"></script>
    </head>
    <body onload="createsphere()">
        <canvas id="glcanvas" width="840" height="620"></canvas>
    </body>
</html>

Three.js是我链接的javascript文件。

function createsphere() {
    var pos = function(d) { return document.getElementById(d); };

    //def scene, camera, renderer
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);  
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //creating a sphere object

    var spheregeometry = new THREE.SphereGeometry(1.0, 30, 30);
    var texture = THREE.ImageUtils.loadTexture('earth.jpg', {}, function() { alert('texture loaded');}, function(){ alert('error loading texture');});
    var spherematerial = new THREE.MeshBasicMaterial({wireframe: true, map: texture});
    var sphere = new THREE.Mesh(spheregeometry, spherematerial);

    scene.add(sphere); 

    camera.position.z = 5;

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

    render();
}

Answer 1

事实上，在做线框时没有背面剔除，因为严格来说没有 faces ，只有线条。

也许你应该做的是创建两个网格，一个是线框素材，另一个是小，黑色，在第一个网格中，0就像这样

function createsphere() {
    var pos = function(d) { return document.getElementById(d); };

    //def scene, camera, renderer
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //creating a sphere object

    var spheregeometry = new THREE.SphereGeometry(1.0, 30, 30);
    var spheregeometry2 = new THREE.SphereGeometry(0.99, 30, 30);
    var texture = THREE.ImageUtils.loadTexture('earth.jpg', {}, function() { alert('texture loaded');}, function(){ alert('error loading texture');});

    var spherematerial = new THREE.MeshBasicMaterial({wireframe: true});
    var spherematerial2 = new THREE.MeshBasicMaterial({side : THREE.DoubleSide, color : '#000000'});

    var sphere = new THREE.Mesh(spheregeometry, spherematerial);
    var sphere2 = new THREE.Mesh(spheregeometry2, spherematerial2);

    scene.add(sphere);
    scene.add(sphere2);

    camera.position.z = 0;

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

    render();
}

请注意，此解决方案意味着一旦您进入球体内部，您将无法看到外部。

如果你想看到外面的话，我认为你不能使用wireframe的{{1}}属性来完成这项工作。也许你需要编写一个着色器，将线条渲染到球体的纹理上。

我想为我的球体对象设置背面剔除，但我很惊讶于为我的线框球体对象定义顶点

1 个答案: