我想設置背面剔除了我的領域對象，但我在定義頂點我線框球體對象

我創建的線框球體對象，但我堅持我想要定義的頂點和應用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(); 
}

來源

2015-10-28 sravan

歡迎來到Stack Overflow！你能否提供更多細節？屏幕截圖，錯誤堆棧跟蹤等。 – naXa

正如我所想的，您正在使用[three.js]（http://threejs.org）庫並詢問[MeshBasicMaterial]（http://threejs.org/docs/#Reference /材料/ MeshBasicMaterial）。請將其納入您的問題中。有很多人可以幫助你，他們不應該花時間去猜測重要的細節。 – naXa

是的，我使用three.js庫，在這裏我也加我的html文件 – sravan

事實上，沒有背面做線框的時候，因爲沒有面孔嚴格來說，只有線撲殺。

你應該做的也許什麼是創建兩個網格，一個與線框材料，和一個更小的和黑色的，第一個裏面，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屬性MeshBasicMaterial來完成這項工作。也許你需要編寫一個着色器來渲染球體紋理上的線。

來源

2015-10-28 22:06:56 tforgione

@sravan檢查我的編輯，並告訴我，如果這是你需要請！ – tforgione

@DragonRock .....謝謝你的回覆我已經嘗試過你的編輯工作正常，但我還有一個挑戰，可以設置此代碼的TRIANGLE_STRIP。我試圖找出，但沒有什麼是如此清楚.. – sravan

你是什麼意思*三角形條*？線框網格顯示正確的三角形？你想要有不同的顯示或...？ – tforgione

我想設置背面剔除了我的領域對象，但我在定義頂點我線框球體對象

回答

相關問題