我想为我的球体对象设置背面剔除，但我对为我的线框球体对象定义顶点感到震惊答案

【问题标题】：I wanted to setup back face culling for my sphere object but i am struck at defining the vertices for my wire frame sphere object我想为我的球体对象设置背面剔除，但我对为我的线框球体对象定义顶点感到震惊
【发布时间】：2016-01-28 09:29:29
【问题描述】：

我正在线框中创建一个球体对象，但是当我想定义顶点并为创建的线框球体对象应用 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();
}

【问题讨论】：

欢迎来到 Stack Overflow！你能提供更多细节吗？截图、错误堆栈跟踪等
我想，您正在使用three.js 库并询问MeshBasicMaterial。请也将其包含在您的问题中。有很多人可以帮助你，他们不应该把时间花在猜测重要细节上。
是的，我正在使用 three.js 库，在这里我也添加了我的 html 文件
我想我已经发布了我拥有的所有信息......

标签： javascript three.js

【解决方案1】：

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

也许你应该做的是创建两个网格，一个使用线框材质，一个较小且黑色，在第一个内部，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();
}

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

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

【讨论】：

@sravan 检查我的编辑，并告诉我它是否是你需要的！
@DragonRock .....谢谢您的回复我已经尝试过您的编辑，它工作正常，但我还有一个挑战，是否可以为此代码设置 TRIANGLE_STRIP。我试图找出答案，但没有什么是那么清楚..
*三角形带*是什么意思？线框网格显示三角形对吗？你想有不同的显示或...？
是的...就像我想删除线框并想在球体上设置 TRIANGLE_STRIP...
好吧，如果你想移除线框，你可以在材质上将wireframe 选项设置为false。但我看不出你所说的三角形带是什么意思。对我来说，triangle strip只是一种压缩的三角形绘制方式，对模型的显示没有影响。你确定你说的是三角条？