Question

我想更改飞机的一些脸部颜色。我创建了一个函数changeColor。我可以在窗口范围内使用它。但我无法在某个事件或间隔上运行该功能。

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.PlaneGeometry(5, 5, 5, 5);
geometry.normalsNeedUpdate = true;
var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: false, vertexColors: THREE.VertexColors });
var planeMesh = new THREE.Mesh(geometry, material);

camera.position.z = 6;

function changeColor() {
  geometry.faces[2].color = new THREE.Color("rgb(255,0,0)")
  geometry.faces[3].color = new THREE.Color("rgb(255,0,0)")
}

window.onkeyup = function (e) {
  var key = e.keyCode ? e.keyCode : e.which;
  if (key == 13) {
    changeColor()
    console.log("tuşa basıldı")
  }
}

scene.add(planeMesh);


function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

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

我需要在按键事件上更改这些面孔的颜色。感谢您的帮助。

Answer 1

我建议使用THREE.BufferGeometry。

将几何图形复制到THREE.BufferGeometry并为每个顶点添加一个（白色）颜色属性：

var geometry = new THREE.PlaneGeometry(5, 5, 5, 5);

let positions = [], normals = [], colors = [];
let color = new THREE.Color( 0xffffff );
geometry.faces.forEach( function ( face ) {
    let f = [face.a, face.b, face.c];
    for (let i=0; i < 3; ++i) {
        positions.push( ...geometry.vertices[f[i]].toArray() );
        normals.push( ...face.normal.toArray() );
        colors.push( ...color.toArray() );
    }
} );

var bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: false, vertexColors: THREE.VertexColors });
var planeMesh = new THREE.Mesh(bufferGeometry, material);

更改属于面部的颜色缓冲区中的3种颜色，并标记需要更新的颜色属性（.needsUpdate = true;）

function changeFaceColor(f, c) {
    colors = bufferGeometry.attributes.color.array;
    for (let i=f*3; i < (f+1)*3; ++i ) {
        colors[i*3] = c.r; colors[i*3+1] = c.g; colors[i*3+2] = c.b;
    }
}

function changeColor() {

    let c = new THREE.Color("rgb(255,0,0)");
    changeFaceColor(2, c);
    changeFaceColor(3, c);

    bufferGeometry.attributes.color.needsUpdate = true;
}

请参阅示例，其中我将建议应用于您的问题代码。
按 返回 以查看效果：

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);

scene = new THREE.Scene();
scene.add(camera);

window.onresize = function() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

var geometry = new THREE.PlaneGeometry(5, 5, 5, 5);

let positions = [], normals = [], colors = [];
let color = new THREE.Color( 0xffffff );
geometry.faces.forEach( function ( face ) {
    let f = [face.a, face.b, face.c];
    for (let i=0; i < 3; ++i) {
        positions.push( ...geometry.vertices[f[i]].toArray() );
        normals.push( ...face.normal.toArray() );
        colors.push( ...color.toArray() );
    }
} );

var bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: false, vertexColors: THREE.VertexColors });
var planeMesh = new THREE.Mesh(bufferGeometry, material);

camera.position.z = 6;

function changeFaceColor(f, c) {
    colors = bufferGeometry.attributes.color.array;
    for (let i=f*3; i < (f+1)*3; ++i ) {
        colors[i*3] = c.r; colors[i*3+1] = c.g; colors[i*3+2] = c.b;
    }
}

function changeColor() {
 
    let c = new THREE.Color("rgb(255,0,0)");
    changeFaceColor(2, c);
    changeFaceColor(3, c);
  
    bufferGeometry.attributes.color.needsUpdate = true;
}

window.onkeyup = function (e) {
  var key = e.keyCode ? e.keyCode : e.which;
  if (key == 13) {
    changeColor()
    console.log("tuşa basıldı")
  }
}

scene.add(planeMesh);


function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

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

在事件中更改脸色

1 个答案: