Realice el control del teclado y el clic del mouse
//全局变量---------------------------------
//仿真场景必备变量
var scene,camera,renderer;
//界面变量
var GuiControls;
//物体变量
var cube;
//相机视角
var fov=45;
var mouseDownX=0;
var mouseMoveX=0;
//鼠标点选变量
const objects = []; //可以点选的物体容器
var mouseXY; //鼠标平面坐标
var raycaster; //射线对象
var boundingBox; //包围盒
var selectedObject; //被选中的物体
//-----------------------------------------
//键盘函数
function WxpKeyPressed(e) {
var key = event.keyCode;
if(!boundingBox)
document.getElementById("notice").innerHTML = "请先选中物体";
switch (key) {
case 87: /*w*/
selectedObject.position.y += 0.5;
selectedObject.rotation.x -= Math.PI/4.0;
break;
case 65:/*a*/
selectedObject.position.x-=0.5;
selectedObject.rotation.y-=Math.PI/4.0;
break;
case 83:/*s*/
selectedObject.position.y -= 0.5;
selectedObject.rotation.x += Math.PI/4.0;
break;
case 68:/*d*/
selectedObject.position.x+=0.5;
selectedObject.rotation.y+=Math.PI/4.0;;
break;
}
//
if(boundingBox)
scene.remove(boundingBox);
boundingBox = new THREE.BoxHelper(selectedObject, 0x0000ff);
scene.add(boundingBox);
}
//---------------------------------------------------
//中键滚动
function WxpMousewheel(e) {
e.preventDefault();
if (e.wheelDelta) {
if (e.wheelDelta > 0) { //当滑轮向上滚动时
fov += 1 ;}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
fov -= 1 ;}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
fov -= 1;}
if (e.detail < 0) { //当滑轮向下滚动时
fov += 1;}
}
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
//左键按下--------------------------------
function WxpMouseDown(event) {//按下鼠标
event.preventDefault();
mouseXY.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
raycaster.setFromCamera( mouseXY, camera );
const intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
selectedObject = intersects[ 0 ].object;
if(boundingBox)
scene.remove(boundingBox);
boundingBox = new THREE.BoxHelper(selectedObject, 0x0000ff);
scene.add(boundingBox);
var str=new String("coord :");
str=str+" x="+selectedObject.position.x.toString();
str=str+", y="+selectedObject.position.y.toString();
str=str+", z="+selectedObject.position.z.toString();
document.getElementById("notice").innerHTML = str;
}
}
//按下左键后移动------------------------------
function WxpMouseMove(event) {//移动鼠标
mouseMoveX=event.clientX-mouseDownX;
// mouseX = event.clientX - windowHalfX;
// targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}
//左键释放-------------------------------------
function WxpMouseUp(event) {//释放鼠标键
document.removeEventListener('mousemove', WxpMouseMove, false);
document.removeEventListener('mouseup', WxpMouseUp, false);
}
//-----------------------------------------
//场景基本配置
function WxpInitScene(){
//**********************基本元素**************************************
var sceneWidth =window.innerWidth; // window.innerWidth-400;
var sceneHeight =window.innerHeight;//window.innerHeight-80;
//创建一个场景
scene = new THREE.Scene();
//创建一个摄像机对象
camera = new THREE.PerspectiveCamera(45, sceneWidth / sceneHeight, 0.1, 200);
//设置摄像机参数
camera.position.set(10.0, -20, 13);
camera.up.set(0, 0, 1); //Z轴正向向上
camera.lookAt(new THREE.Vector3(0, 0, 0));
//创建一个WebGL渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(new THREE.Color(0x7696f1));
renderer.setSize(sceneWidth,sceneHeight);
renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置
//系统坐标系绘制-------------------------
var axesHelper = new THREE.AxesHelper(12);
scene.add(axesHelper);
raycaster = new THREE.Raycaster();
mouseXY = new THREE.Vector2();
//网格线绘制
var grid = new THREE.GridHelper(24, 24, 0xFF0000, 0x444444);
grid.material.opacity = 0.4;
grid.material.transparent = true;
grid.rotation.x = Math.PI/2.0; //默认网格线旋转90度
scene.add(grid);
//---------------------------------------
//***********************************************************************
//创建点光源 正上面
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 0, 50);
spotLight.castShadow = true;
//scene.add(spotLight);
//右上角
var spotLight2 = new THREE.SpotLight(0xffffff);
spotLight2.position.set(10, 10, 5);
spotLight.castShadow = true;
scene.add(spotLight2);
//右下角
var spotLight3 = new THREE.SpotLight(0xffffff);
spotLight3.position.set(10, -10, 0);
spotLight3.castShadow = true;
scene.add(spotLight3);
//左下角
var spotLight4 = new THREE.SpotLight(0xffffff);
spotLight4.position.set(-10, -10, -5);
spotLight4.castShadow = true;
scene.add(spotLight4);
//将渲染的结果输出到指定页面元素中
document.getElementById("WebGLwxp").appendChild(renderer.domElement);
window.addEventListener('keydown', WxpKeyPressed, false);
window.addEventListener('mousedown', WxpMouseDown, false);
window.addEventListener('mousewheel', WxpMousewheel, false);
}