gpt4 book ai didi

javascript - 如何使用 Three.js 中的按钮选择场景中的对象

转载 作者:太空宇宙 更新时间:2023-11-04 15:52:43 25 4
gpt4 key购买 nike

我有一个场景。这个场景有 3 个物体(球体和立方体)。在场景的右侧,我有一个 div 元素 (id = "rightMenu")。
我想动态添加按钮到rightMenu。其中一个按钮名称为 sphere,另一个按钮名称为cube,最后一个按钮名称为 sphere1。
当我单击球体按钮时,场景中的球体会突出显示。
这是我的代码:

<body>

<div id="Button-area">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);

var projector = new THREE.Projector();
document.addEventListener('mousedown', onDocumentMouseDown, false);

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-9,3,0);
scene.add(cube);

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20,0,2);
scene.add(sphere);

var sphere2Geometry = new THREE.SphereGeometry(4, 20, 20);
var sphere2Material = new THREE.MeshLambertMaterial({color: 0x77fff});
var sphere2 = new THREE.Mesh(sphere2Geometry, sphere2Material);
sphere2.position.set(40,-3,4);
scene.add(sphere2);

camera.position.set(-30,40,30);
camera.lookAt(scene.position);

var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);

document.getElementById("WebGL-output").appendChild(renderer.domElement);
render();

function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);

}

var projector = new THREE.Projector();

function onDocumentMouseDown(event) {

var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
vector = vector.unproject(camera);

var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

var intersects = raycaster.intersectObjects([sphere, sphere2, cube]);

if (intersects.length > 0) {
intersects[0].object.material.transparent = true;
intersects[0].object.material.opacity = 0.1;
}
}

}
window.onload = init();
</script>
</body>

我该怎么办?感谢您的帮助。

最佳答案

这只是您执行此操作的一个选项。

您可以同时在场景中创建一个菜单按钮和一个对象,为它们指定相同的名称,然后在按钮的 click 事件中读取其名称并查看对于具有相同名称的对象。

sceneObjects = [];

当你创建一个对象时,将它压入这个数组:

sceneObjects.push(mesh);

然后,当您单击该按钮时,您将查找该对象:

function onClick(event) {
var name = event.target.name.trim(); // get the name of the button
sceneObjects.forEach(function(obj) { // loop through array of objects
obj.material.emissive.setRGB(0, 0, 0); // reset to default (black)
if (obj.name == name) obj.material.emissive.setRGB(.5, .5, 0); // highlighting
});
}

这取决于你,如何实现对象的突出显示,我只使用了自发光颜色。

jsfiddle示例。

关于javascript - 如何使用 Three.js 中的按钮选择场景中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42987818/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com