个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
如何使用 BufferGeometry 绘制简单的正方形？例如，BufferGeometry 绘制了 120000 个三 Angular 形，我想将其分解为两个，形成一个简单的正方形。
<html>
<head>
<title>test app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
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);
//var geometry = new THREE.CubeGeometry(1,1,1);
var triangles = 2;
var geometry = new THREE.BufferGeometry();
geometry.attributes = {
index: {
itemSize: 1,
array: new Uint16Array( triangles * 3 ),
numItems: triangles * 3
},
position: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
},
normal: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
},
color: {
itemSize: 3,
array: new Float32Array( triangles * 3 * 3 ),
numItems: triangles * 3 * 3
}
}
var color = new THREE.Color();
var indices = geometry.attributes.index.array;
var positions = geometry.attributes.position.array;
var normals = geometry.attributes.normal.array; //not setting normals - is it relevant if there is no light defined?
var colors = geometry.attributes.color.array;
for ( var i = 0; i < indices.length; i ++ ) {
indices[ i ] = i % ( 3 * 1 ); // How to set indices????
}
for ( var i = 0; i < positions.length; i += 9 ) {
//I know these will make two triangles at same position, but i want to see them appear first..
positions[ i ] = 0;
positions[ i + 1 ] = 0;
positions[ i + 2 ] = 0;
positions[ i + 3 ] = 0;
positions[ i + 4 ] = 1;
positions[ i + 5 ] = 0;
positions[ i + 6 ] = 1;
positions[ i + 7 ] = 0;
positions[ i + 8 ] = 0;
color.setRGB( 55, 202, 55 );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
colors[ i + 3 ] = color.r;
colors[ i + 4 ] = color.g;
colors[ i + 5 ] = color.b;
colors[ i + 6 ] = color.r;
colors[ i + 7 ] = color.g;
colors[ i + 8 ] = color.b;
}
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var square = new THREE.Mesh(geometry, material);
scene.add(square);
camera.position.z = -5;
var render = function () {
requestAnimationFrame(render);
square.rotation.x += 0.1;
square.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
最佳答案
在最新的三个 js 版本中，您不能将索引设置为 @calvin-sydney 在他的回答中所写的方式。您将必须使用 THREE.BufferGeometry 中的 setIndex 方法。
geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geometry.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
关于javascript - 如何使用 BufferGeometry 绘制简单的正方形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17599501/
24
4
0
如何在 ThreeJS 中将两个缓冲区几何合并到一个 THREE.BufferGeometry 中？ var modelGeometry = null; geometry = new THREE.Cy
据我了解，Geometry 存储顶点和面的 javascript 对象结构，而 BufferGeometry 只是通过 Float32Arrays 等存储原始 gl 数据。 有什么方法可以将标准 Ge
作为场景对象的基础，我有一个根 Object3D。我的数据从这个根加载为 Object3D 的树结构。使用 BufferGeometry/MeshPhongMaterial 将网格添加到叶 Objec
我试图制作一个显示大量球形对象的三个 js 文档，最快的方法是使用 buffergeometry。来自这篇文章here我了解到我可以使用以下方法将普通几何体转换为缓冲几何体: var sphe
我正在尝试将我在 openFrameworks 中编写的一些代码移植到 THREE.JS 中。该代码使用 perlin 噪声生成景观。我这样做是为了首先创建一个静态索引数组，然后将顶点的位置放置在一个
我只是想知道“偏移量”和“索引/索引”究竟是什么。偏移量是例如在 https://github.com/mrdoob/three.js/blob/dev/src/core/BufferGeometry
我正在使用 BufferGeometry 来绘制构成地形的数千个立方体，但是如果我需要更改其中一个立方体的位置，我很难找到如何更新几何体。例如，我有这段代码来初始化我的几何图形:(我正在对 this
我是 two.js 的新手。我使用以下代码创建了一个测试多边形: var geometry = new THREE.BufferGeometry(); var vertices = new Float
当使用 BufferGeometry 时，如何为面指定 Material ？ 是否有类似数组的东西包含与 Face#materialIndex 相同的信息？ 最佳答案 BufferGeometry 不
我有一个这样的输出日期: geom[0] = { texturesindexT: new Int16Array([0,1,2,3]), texturesindexS: new Int16Array([
我有一条随机线“绕着我的场景走动”(某种 3D 蛇)，接下来我想要实现的是在它的头部周围设置一个盒子。bufferGeometry 行由 设置 var positions1 = new
我以编程方式创建了一个简单的网格: var CreateSimpleMesh = new function () { var xy = [], maxX = 7,
如何使用 BufferGeometry 绘制简单的正方形？例如，BufferGeometry 绘制了 120000 个三 Angular 形，我想将其分解为两个，形成一个简单的正方形。 t
我一直在尝试使用 THREE.BufferGeometry() 绘制一个非常基本的矩形。这是代码- var geometry = new THREE.BufferGeometry(); var mat
交集对象(由 raycaster.intersectObject() 返回)具有 face 和 faceIndex 属性。但是，如果相交对象是 BufferGeometry，则这些属性为 null。另
我使用 STLLoader 将 STL 加载到返回 BufferGeometry 的 threeJS 场景中。 然后我用了 myMesh.position.set( x,y,z ) myMesh.ro
假设我从名为 oldGeom 的 THREE.Geometry 生成了一个 THREE.BufferGeometry，如下所示: // using WebGLRenderer var geometry
我创建了一个 bufferGeometry ，它由 5 个平面 (100x25) 组成，每个平面有两个三 Angular 形。 function createGeometry() { var ge
geometry.faces 仅可用于新的 THREE.BoxGeometry。然后我尝试使用 THREE.BoxBufferGeometry 我不能改变面孔的颜色。 不工作: var geome
在 BufferGeometry 中，有没有一种方法可以访问面索引和法线而不转换为 Geometry？ 手头的几何体是由 Threejs 编辑器创建的 SphereBufferGeometry。 我只
我是一名优秀的程序员,十分优秀！