【发布时间】：2020-07-16 00:38:17
【问题描述】：
我目前正在开发一个 Web 应用程序，当面部被 Raycaster（鼠标）悬停时，它应该为面部赋予另一种颜色。
我目前有一个可用的 .stl 查看器和轨道控件。
使用已知的工作 .stl 文件 see my github 下载并运行我的代码。你可以很容易地运行它，只需要一个实时服务器（这在 VSCode 中很容易做到，参见readme）。
目前它可以完美地更改整个对象的颜色，但是当我尝试使用 raycaster 的 intersects 更改面部颜色时（与更改对象属性的方式相同），它不起作用。我已经读到您必须将vertexColors: THREE.VertexColors 添加到您的材料属性中。
我可以看到颜色值正在发生变化（在面部的颜色属性上使用 console.log），当我更改 intersects[i].face.color.setHex(0x0f0f0f) 时，它会更改为不同的对应值。但视觉面貌并没有改变。
我认为我遗漏了什么或忽略了什么，但我似乎无法弄清楚。
我当前的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d viewer tjalle</title>
<link rel="stylesheet" type="text/css" href="../style/render.css">
</head>
<body>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/build/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/loaders/STLLoader.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/controls/OrbitControls.js"></script>
<script>
function init() {
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.addEventListener('mousemove', onMouseMove, false);
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
// Setup some basic stuff
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
// Setup Camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
// Setup renerer and add to page
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Setup Camera Position
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
// Add Camera Control through orbit.js
let controls = new THREE.OrbitControls(camera, renderer.domElement);
// Add some basic ambient lighting (Does light all parts equally and does not cast shadows)
hlight = new THREE.AmbientLight(0xffffff, 5.3);
scene.add(hlight);
//Add some point lights to simulate real lights
light = new THREE.PointLight(0xffffff, 1, 10000);
light.position.set(0, 300, 500);
scene.add(light);
controls.update();
// Animation Script
function animate() {
raycaster.setFromCamera(mouse, camera);
// scene.children[2].material.color.set(0x1313)
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
// changes whole object to red
// intersects[i].object.material.color.set(0xff0000);
intersects[i].face.color.setHex(0x0f0f0f)
}
if (intersects.length > 1) {
console.log(intersects[1].face.color);
}
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
// Setup GLTF Loader and load in car
let loader = new THREE.STLLoader();
loader.load('example.stl', function (geometry) {
// console.log(gltf);
var material = new THREE.MeshLambertMaterial({
color: 0x1313,
wireframe: false,
transparent: false,
vertexColors: THREE.vertexColors
});
var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.position.set(0, 0, 0);
mesh.name = 'Tjalle\'s Mesh'
scene.add(mesh);
renderer.render(scene, camera)
animate();
console.log("Scene: ",)
console.log(mesh)
});
}
// Call method for starting init
init();
</script>
</body>
</html>
【问题讨论】：
标签： javascript three.js