Question

我在THREE.TriangleStripDrawMode绘制模式下玩绘画组，我看到一些奇怪的文物。我认为这可能是一个错误，但我希望其他人在提交报告之前确认我没有做错事。

在下面的代码片段中，我创建了4个正方形，每个正方形由4个三角形组成。它们都被编入索引用于右手渲染。（我意识到三角形条在技术上不需要索引，但我可能有复杂的形状和重复使用的顶点。）它们的其他属性和结果如下：

红场

两组：0-9和9-12
标准正面渲染
三角形索引1背面的黑色神器

绿色广场

一组：0-12
标准正面渲染
三角形索引1＆amp;背面的黑色伪影。 3
当我不使用分组时会发生同样的事情

蓝方

两组：0-9和9-12
双面渲染
按预期呈现

黄色方块

一组：0-12
双面渲染
三角形指数3在两侧呈现黑色

所以我错过了什么，或者我应该将其作为three.js中的错误提交？

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
	HEIGHT = window.innerHeight,
	FOV = 35,
	NEAR = 1,
	FAR = 1000;

function createShapes(){
	var bg = new THREE.BufferGeometry();
	bg.addAttribute("position", new THREE.BufferAttribute(new Float32Array([
		-1, 1, 0,
		-1, -1, 0,
		0, 1, 0,
		0, -1, 0,
		1, 1, 0,
		1, -1, 0
	]), 3));
	bg.addAttribute("normal", new THREE.BufferAttribute(new Float32Array([
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1,
		0, 0, 1
	]), 3));
	bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
		0, 1, 2,
		3, 2, 1,
		2, 3, 4,
		5, 4, 3
	]), 1));

	var group1 = bg.clone(),
		group2 = bg.clone(),
		group3 = bg.clone(),
		group4 = bg.clone();

	/**/
	group1.clearGroups();
	group1.addGroup(0, 9, 0);
	group1.addGroup(9, 3, 0);

	group2.clearGroups();
	group2.addGroup(0, 12, 0);

	group3.clearGroups();
	group3.addGroup(0, 9, 0);
	group3.addGroup(9, 3, 0);

	group4.clearGroups();
	group4.addGroup(0, 12, 0);
	/**/

	var mat1 = new THREE.MeshPhongMaterial({color: "red"}),
		mat2 = new THREE.MeshPhongMaterial({color: "green"}),
		mat3 = new THREE.MeshPhongMaterial({color: "blue", side: THREE.DoubleSide}),
		mat4 = new THREE.MeshPhongMaterial({color: "yellow", side: THREE.DoubleSide});

	var m1 = new THREE.Mesh(group1, [mat1]),
		m2 = new THREE.Mesh(group2, [mat2]),
		m3 = new THREE.Mesh(group3, [mat3]),
		m4 = new THREE.Mesh(group4, [mat4]);

	m1.drawMode = THREE.TriangleStripDrawMode;
	m2.drawMode = THREE.TriangleStripDrawMode;
	m3.drawMode = THREE.TriangleStripDrawMode;
	m4.drawMode = THREE.TriangleStripDrawMode;

	m1.position.set(-2, 2, 0);
	m2.position.set(2, 2, 0);
	m3.position.set(-2, -2, 0);
	m4.position.set(2, -2, 0);

	scene.add(m1, m2, m3, m4);
}

function init() {
	document.body.style.backgroundColor = "slateGray";

	renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

	document.body.appendChild(renderer.domElement);
	document.body.style.overflow = "hidden";
	document.body.style.margin = "0";
	document.body.style.padding = "0";

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
	camera.position.z = 20;
	scene.add(camera);

	controls = new THREE.TrackballControls(camera, renderer.domElement);
	controls.dynamicDampingFactor = 0.5;
	controls.rotateSpeed = 3;

	var light = new THREE.PointLight(0xffffff, 1, Infinity);
	camera.add(light);

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0';
	document.body.appendChild(stats.domElement);

	resize();
	window.onresize = resize;

	// POPULATE EXAMPLE
	createShapes();

	animate();
}

function resize() {
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
	if (renderer && camera && controls) {
		renderer.setSize(WIDTH, HEIGHT);
		camera.aspect = WIDTH / HEIGHT;
		camera.updateProjectionMatrix();
		controls.handleResize();
	}
}

function render() {
	renderer.render(scene, camera);
}

function animate() {
	requestAnimationFrame(animate);
	render();
	controls.update();
	stats.update();
}

function threeReady() {
	init();
}

(function () {
	function addScript(url, callback) {
		callback = callback || function () { };
		var script = document.createElement("script");
		script.addEventListener("load", callback);
		script.setAttribute("src", url);
		document.head.appendChild(script);
	}

	addScript("https://threejs.org/build/three.js", function () {
		addScript("https://threejs.org/examples/js/controls/TrackballControls.js", function () {
			addScript("https://threejs.org/examples/js/libs/stats.min.js", function () {
				threeReady();
			})
		})
	})
})();

r86（问题实际上已经存在了一段时间）

Answer 1

我有一个“AHA！”看一些其他例子的那一刻。我的索引关闭了，这也放弃了我的分组。

索引应为：

bg.setIndex(new THREE.BufferAttribute(new Uint32Array([
    0, 1, 2, 3, 4, 5
]), 1));

这是有道理的，因为这是三角形条带如何定义其顶点的步骤。

然后画一个完整的正方形，我需要一个小组：

group1.addGroup(0, 6, 0);

这意味着从组索引0开始，对于6组索引（涵盖所有索引）。

尝试渲染（奇数索引）单个三角形时仍然存在问题。由于奇数三角形的绕线顺序是向后的，因此创建以奇数三角形开头的组将无法正确点亮（呈现黑色）。但这是另一个问题......

三角形条纹文物

1 个答案: