Javascript 如何在Three.js中同时使用TrackballControls.js和Projector.js
我有一个有多个对象的场景，我想单击并选择一个对象，然后旋转和缩放场景。Javascript 如何在Three.js中同时使用TrackballControls.js和Projector.js,javascript,three.js,rotation,clickable,trackball,Javascript,Three.js,Rotation,Clickable,Trackball,我有一个有多个对象的场景，我想单击并选择一个对象，然后旋转和缩放场景。 对于缩放、旋转和平移场景，我使用TrackballControl.js。 对于单击并选择对象，我使用Projector.js。 他们按照我的要求分开工作。但是，当我结合使用这两个Projector.js时，由于轨迹球控制，无法工作。我不知道如何将这两者结合使用。 你有什么建议吗？ 我的测试代码如下： <!DOCTYPE html> <html> <head> <title&g
对于缩放、旋转和平移场景，我使用TrackballControl.js。
对于单击并选择对象，我使用Projector.js。
他们按照我的要求分开工作。但是，当我结合使用这两个Projector.js时，由于轨迹球控制，无法工作。我不知道如何将这两者结合使用。
你有什么建议吗？
我的测试代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Selecting objects</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/Projector.js"></script>
<script type="text/javascript" src="../libs/TrackballControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
var scene, camera,renderer,cube,sphere,cylinder, control;
function prepareScene(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
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);
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function addGeometry(){
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-9,3,0);
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
control.update();
}
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([cube]);
if (intersects.length > 0) {
console.log(intersects[0].point);
intersects[0].object.material.transparent = true;
intersects[0].object.material.opacity = 0.1;
}
}
function init() {
prepareScene();
var projector = new THREE.Projector();
document.addEventListener('mousedown', onDocumentMouseDown, false);
/*control = new THREE.TrackballControls(camera, document.getElementById("WebGL-output"));
control.addEventListener("change", render);
control.rotateSpeed = 3.0;
control.zoomSpeed = 3.0;
control.panSpeed = 3.0; */
addGeometry();
render();
//animate();
}
window.onload = init;
</script>
</body>
</html>
选择对象
身体{
保证金：0；
溢出：隐藏；
}
var场景、摄影机、渲染器、立方体、球体、圆柱体、控件；
函数prepareScene（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
renderer=new THREE.WebGLRenderer（）；
setClearColor（新的三种颜色（0xEEEE，1.0））；
renderer.setSize（window.innerWidth、window.innerHeight）；
摄像机位置设置（-30,40,30）；
摄像机。注视（场景。位置）；
var环境光=新的三个环境光（0x0c）；
场景。添加（环境光）；
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（-40,60，-10）；
场景。添加（聚光灯）；
document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
函数addGeometry（）{
var cubeGeometry=新的三盒几何体（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
立方体=新的三网格（立方计量法、立方材料）；
立方体位置集（-9,3,0）；
场景.添加（立方体）；
}
函数animate（）{
请求动画帧（动画）；
control.update（）；
}
函数onDocumentMouseDown（事件）{
var vector=new THREE.Vector3（（event.clientX/window.innerWidth）*2-1，-（event.clientY/window.innerHeight）*2+1，0.5）；
矢量=矢量。取消投影（摄像机）；
var raycaster=new THREE.raycaster（camera.position，vector.sub（camera.position.normalize（））；
var intersects=raycaster.intersectObjects（[cube]）；
如果（相交长度>0）{
console.log（与[0].点相交）；
相交[0]。object.material.transparent=true；
相交[0]。object.material.opacity=0.1；
}
}
函数init（）{
预处理（）；
var投影仪=新的三个投影仪（）；
文件。添加的文件列表（“mousedown”，onDocumentMouseDown，false）；
/*control=新的三个.trackball控件（camera、document.getElementById（“WebGL输出”））；
控件。addEventListener（“更改”，呈现）；
control.rotateSpeed=3.0；
control.zoomSpeed=3.0；
control.panSpeed=3.0；*/
addGeometry（）；
render（）；
//制作动画（）；
}
window.onload=init；
init（）render（）animate（）init（）之后调用animate（）
。谢谢你的帮助。我想我没有理解render（）的功能。