将线框渲染对象的单行颜色更改为三.js

Question

嗨，我的名字是朱利亚诺，这是我在这个网站上的第一个问题:)

我在画布上生成了一个CircleBufferGeometry，在 #000 黑色背景上渲染为 #fff 线框;渲染稳定，场景没有错误。

现在，我尝试只选择一条渲染的线框线并更改其颜色。我的最终目标是创建一个包含60 条顶点线(从物体中心到边缘的线(的圆，并且每秒仅交替 1 条线的颜色，以模拟时钟指针。

这是我现在在正在进行的工作网站上可见的代码：

var material = new THREE.MeshBasicMaterial( 
{ color: 0xfefefe, wireframe: true, opacity: 0.5 } );
		  	init();
			  function addMesh() {
				if ( mesh !== undefined ) {
					scene.remove( mesh );
					geometry.dispose();

				}

		geometry = geometries[ options.Geometry ];
		geometry.computeBoundingSphere();

	var scaleFactor = 1160 / geometry.boundingSphere.radius;

	geometry.scale( scaleFactor, scaleFactor, scaleFactor );
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

			}

理想的解决方案是jQuery选择器(或任何选择器(，它允许我在行数组中定位我想要的行，并使用递增的值来循环浏览它们。

我以为我可以使用向内顶点法线助手(红色(来模拟效果，但我缺乏知识，真的不知道如何应用一些想法......我刚开始在Three中进行实验.js :)

感谢每一个帮助，对不起我对基本力学的浅薄理解。 朱利亚诺

Answer 1

一个关于如何做到这一点的非常粗略的概念：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var segs = 60;
var baseVector = new THREE.Vector3(0, 5, 0);
var axisVector = new THREE.Vector3(0, 0, 1);
var step = THREE.Math.degToRad(6);
var vertices = [];
for (var i = 0; i < segs; i++) {
vertices.push(new THREE.Vector3());
vertices.push(baseVector.clone().applyAxisAngle(axisVector, -step * i));
}
var geom = new THREE.BufferGeometry().setFromPoints(vertices);
var colors = [];
var baseColor = new THREE.Color("gray");
var color = new THREE.Color("aqua");
for (let i = 1; i <= segs; i++) {
let idx = (i - 1) * 6;
baseColor.toArray(colors, idx);
baseColor.toArray(colors, idx + 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
var lines = new THREE.LineSegments(geom, new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
}));
scene.add(lines);
function setLineColor(idx, color) {
geom.attributes.color.setXYZ(idx * 2, color.r, color.g, color.b);
geom.attributes.color.setXYZ(idx * 2 + 1, color.r, color.g, color.b);
}
function getSec() {
return new Date().getSeconds();
}
var prevSecond = getSec();
var currSecond = 0;
render();
function render() {
requestAnimationFrame(render);
currSecond = getSec();
if (prevSecond != currSecond) {
setLineColor(currSecond, color);
setLineColor(prevSecond, baseColor);
geom.attributes.color.needsUpdate = true;
prevSecond = currSecond;
}
renderer.render(scene, camera);
}

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>

另一种选择是旋转网格(或其几何体，由您决定(：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var segs = 60;
var baseVector = new THREE.Vector3(0, 5, 0);
var axisVector = new THREE.Vector3(0, 0, 1);
var step = THREE.Math.degToRad(6);
var vertices = [];
for (var i = 0; i < segs; i++) {
vertices.push(new THREE.Vector3());
vertices.push(baseVector.clone().applyAxisAngle(axisVector, -step * i));
}
var geom = new THREE.BufferGeometry().setFromPoints(vertices);
var colors = [];
var baseColor = new THREE.Color("gray");
var color = new THREE.Color("aqua");
for (let i = 1; i <= segs; i++) {
let idx = (i - 1) * 6;
baseColor.toArray(colors, idx);
baseColor.toArray(colors, idx + 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
var lines = new THREE.LineSegments(geom, new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
}));
scene.add(lines);
function setLineColor(idx, color) {
geom.attributes.color.setXYZ(idx * 2, color.r, color.g, color.b);
geom.attributes.color.setXYZ(idx * 2 + 1, color.r, color.g, color.b);
}
setLineColor(0, color);
geom.attributes.color.needsUpdate = true;
lines.rotation.z = -step * getSec();
function getSec() {
return new Date().getSeconds();
}
var prevSecond = getSec();
var currSecond = 0;
render();
function render() {
requestAnimationFrame(render);
currSecond = getSec();
if (prevSecond != currSecond) {
lines.rotation.z = -step * currSecond;
prevSecond = currSecond;
}
renderer.render(scene, camera);
}

body {
overflow: hidden;
margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>