Question

嗨，我的名字是Giuliano ，这是我在这个网站上生活的第一个问题：）

我在画布中生成了 CircleBufferGeometry ，在＃000黑色背景上呈现为#fff线框;渲染是稳定的，场景没有错误。

现在我尝试只选择一个渲染的线框线并更改其颜色。 我的最终目标是创建一个包含 60个顶点线的圆圈（从中心到对象边缘的线条），每隔一个颜色只有1行的颜色作为时钟指针的模拟。

这是我现在可见的代码on my work in progress website：

＆＃13;

        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 );
        
			}

＆＃13;

理想的解决方案是jQuery选择器（或任何选择器），它允许我在一系列行中定位我想要的行，并使用增加的值来循环它们。

我以为我可以使用向内顶点正常助手（红色）模拟效果，但我缺乏知识，真的不知道如何应用一些想法......我刚开始尝试三.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>

在three.js

1 个答案: