个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在在线框中创建一个球体对象，但当我想定义顶点并应用 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();
}
最佳答案
事实上，在制作线框时没有背面剔除，因为严格来说没有面，只有线条。
也许你应该做的是创建两个网格，一个带有线框 Material ，另一个较小且黑色，位于第一个网格内，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 属性来完成这项工作。也许您需要编写一个着色器来渲染球体纹理上的导线。
关于javascript - 我想为我的球体对象设置背面剔除，但我对定义线框球体对象的顶点感到惊讶，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33393914/
25
4
0
我一直在尝试根据内部“ Shiny 球体”图案在球体上产生发光效果，但一直坚持定位“球体”的某些方面。 就目前而言，我的 CSS 看起来像这样: .sphere { height: 200px;
我正在尝试使用下面给出的旋转矩阵来旋转“轨道”: [cos(angle) -sin(angle) 0; sin(angle) cos (angle) 0; 0 0
我有一组由地理 (WGS84) 坐标指定的多边形:它们位于一个球体上。 我有一个由经纬度对指定的点。 我想(有效地)找到点和多边形之间的最小大圆距离。 我当前的堆栈包括 fiona、shapely、g
将 boost::geometry::line_interpolate 与 boost::geometry::srs::spheroid 结合使用，我正在计算沿最短距离的大圆导航点2个地理点。下面的代
如何在 JavaFX 中填充具有线性渐变(如 2d 圆)的 3D 球体？我使用 JavaFX Scene Builder。 最佳答案 正如@mohsenmadi 所指出的，漫反射颜色不允许您使用一种颜
我想使用 Python PyOpenGL 生成三个球体的场景。两个在有颜色的一侧(红色和绿色)。中间一个上面有任何纹理(砖 block 纹理实际上是与代码位于同一目录中的方形 jpg 文件)。 到目前
我从不同网格变量中的 .x 文件加载多个网格。现在我想计算我加载的所有网格(以及正在显示的网格)的包围球请指导我如何实现这一目标。可以将 VertexBuffers 附加到一个变量中并使用它计算 bo
我正在尝试用“粒子”(由 3D XYZ 向量表示)以最佳方式填充 3D 球形体积，这些粒子需要彼此保持特定距离，同时尽量减少它们之间存在的自由空间量. 但有一个问题 - 粒子本身可能会落在球形体积的边
我想创建一个球体，实际上是一个地球仪。但我似乎找不到任何有关如何处理球体的顶点和索引以及如何设置它们的有用信息。你们中的任何人都可以引导我走上正确的轨道，也许给我一些示例代码或指向教程的链接吗？ 最佳
我终于手动画了一个球体:) 我希望我的球体是红色的，但轮廓是绿色的: 为了实现这一点，我做了以下事情。我用红色画了一个实心球体，然后我画了同一个球体，但线框和绿色。当我打开 DEPTH_TEST 时，
我想在 HTML 5.0 Canvas 中绘制 3D 球或球体。我想了解有关如何绘制 3D 球体的算法。谁可以与我分享这个？ 最佳答案 您将需要为一个球体建模，并让它具有不同的颜色，以便在它旋转时您可
我正在尝试使用 webGL 构建 3D 太阳系。 我让所有恒星按照应有的方式绕太阳旋转，并且我希望它们也绕自己的 Y 轴旋转。 我怎样才能添加它？我尝试过: mat4.rotate(mvMatrix,
我有二维彩色图像。所有彩色点都位于此矩形图像中心的圆形区域内，圆圈外的所有点都是黑色的(我从鱼眼相机获得这些矩形图像)。我知道这个圆心的坐标和它的半径。 我需要将所有彩色点从 2D 图像上的圆形区域移
我正在用球体上的粒子进行 Metropolis Monte Carlo 模拟，并有一个关于给定时间步长内随机运动的问题。 我知道要在球体上获得均匀分布的随机点开始，使用最简单的方法是不够的(使用恒定
我想让球体向前移动一定的厘米，但到目前为止我还没有设法让任何东西正常工作这是我现在的代码: EditText distanceText = (EditText) findViewById(R.id.d
我想仅使用 Canvas 制作一个旋转对象(球体、盒子等)。但我找不到教程。如果您看到某个地方或解释如何做，请提供帮助。 像这样example ，仅无任何效果 最佳答案 希望你喜欢数学。如果您愿意编写
使用 GL_TRIANGLES 在 OpenGL ES 2.0 中绘制纹理球体的最简单方法是什么？ 我特别想知道如何计算顶点。 最佳答案 有多种方法可以对球体进行三角测量。受欢迎的，不太受欢迎的，好的
我有一个关于在 HTML5/Canvas/Javascript 中伪造 3d 的问题... 基本上，我在 上绘制了一个二维图像使用 drawImage() . 我想做的是绘制图像，然后置换球体上的纹
我在 OpenGL ES 中绘制行星，遇到了一些有趣的性能问题。普遍的问题是:如何最好地在球体上渲染“非常详细”的纹理？ (球体是有保证的；我对球体特定的优化很感兴趣) 基本案例: 窗口大约是。 20
对于我的论文项目，我使用 DataArts WebGL Globe 来开发一个网页，该网页将在触摸显示器上的展览中使用。作为监视器触摸，我需要使地球可点击以选择单个国家并打开弹出窗口并突出显示选定的国
我是一名优秀的程序员,十分优秀！