HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="expires" content="Wed, 23 Aug 2006 12:40:27 UTC" />
<title>three.js测试点击事件</title>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/TrackballControls.js" ></script>
<!--#include Virtual="/Func/Common.asp" -->
<link rel="stylesheet" href="css/three/testThree.css">
</head>
<body onload="OnLoad()">
<div id="WebGL-output"></div>
<div class="dataBox">
<!-- 右侧空调1 -->
<section class="ac-right-01">
<h3>空调</h3>
<span class="ac-right-01-close" onclick="ACClsoe()">X</span>
<ul class="ac-right-01-content">
<li>
<button id="kaiji" onclick="ACOpen()">开机</button>
<button id="guanji" onclick="ACOff()">关机</button>
</li>
<li><span>温度设定</span><span id="wdset"></span></li>
<li><span>湿度设定</span><span id="sdset"></span></li>
<li><span>回风温度</span><span id="hfwd"></span></li>
<li><span>回风湿度</span><span id="hfsd"></span></li>
<li><span>加热状态</span><span id="jrzt"></span></li>
<li><span>制冷状态</span><span id="zlzt"></span></li>
<li><span>加湿状态</span><span id="jszt"></span></li>
<li><span>除湿状态</span><span id="cszt"></span></li>
</ul>
</section>
<button onclick="test()" style="position: fixed; top: 10vh; right: 2vw;">test</button>
</div>
<script src="js/three/logic/logic.1.js"></script>
<script src="js/testThree.js"></script>
</body>
</html>
js部分：
// 1、
var renderer;
function initRender () {
renderer = new THREE.WebGLRenderer(); //渲染器构建
renderer.setClearColor('#6A993E'); // 背景色 // renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth , window.innerHeight);
}
// 2、
var camera;
function initCamera () {
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //相机构建
camera.position.x = -30; //渲染视图视角
camera.position.y = 20;
camera.position.z = 30;
}
// 3、
var scene;
var axes;
function initScene () {
scene = new THREE.Scene(); //场景构建
axes = new THREE.AxisHelper(20); //构建一个坐标轴
scene.add(axes);
}
// 4、
//添加材质灯光阴影 -- 必要
var spotLight;
var light;
function initLight () {
spotLight = new THREE.SpotLight('#FFFFFF'); // 聚光灯 可以不要
spotLight.position.set(-20,20,10);
spotLight.castShadow = true;
scene.add(spotLight);
light = new THREE.AmbientLight(0xffffff, .3); // 环境光源颜色
light.position.set(30, 30, 0);//光源位置
scene.add(light);//光源添加到场景中
camera.lookAt(scene.position)
}
// 5、设置物体object
//创建控件并绑定在相机上
function initControls () {
trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.noZoom = false;
trackballControls.noPan = false;
trackballControls.staticMoving = true;
trackballControls.dynamicDampingFactor = 0.3;
}
// model
var mtlLoader;
var objLoader;
var Obj;
function initModel () {
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
}
};
var onError = function(xhr) {
// console.log(xhr)
};
mtlLoader = new THREE.MTLLoader(); // 模型1
// mtlLoader.setBaseUrl('news/'); // obj mtl文件的路径 objLoader.setMaterials( materials )
mtlLoader.setPath('model/'); // obj mtl文件的目录
mtlLoader.load('test02.mtl', function(materials) {
materials.preload();
objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('model/');
objLoader.load('test02.obj', function(object) {
object.position.x = 0;
object.position.y = -25;
object.position.z = -10;
// object.rotation.y = 0;
object.scale.set(.15, .15, .15); // 长 高 宽 比例
Obj = object;
scene.add(object);
}, onProgress, onError);
});
}
var raycaster;
var mouse;
function onMouseClick( event ) {
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
raycaster.setFromCamera( mouse, camera );
// 获取raycaster直线和所有模型相交的数组集合
var intersects = raycaster.intersectObjects( scene.children, true );
// console.log(intersects);
console.log(intersects[ 0 ].object.name);
let Mname = intersects[ 0 ].object.name;
if (Mname == 'Mesh87 ___23_2 Model') { // 右侧控制室的空调
$(".ac-right-01").show();
}
//将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
for ( var i = 0; i < intersects.length; i++ ) {
// console.log(intersects[ i ]);
// intersects[ i ].object.material.color.set( 0xff0000 );
// intersects[ 0 ].object.material.color.set( 0xff0000 );
// console.log(intersects[ 0 ].object.name)
console.log(intersects[ 0 ].object.uuid)
// console.log(intersects[ 0 ].object)
}
}
function renderScene(){
var clock = new THREE.Clock();
var delta = clock.getDelta();
trackballControls.update(delta);
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}
//
function OnLoad() {
initRender();
initCamera();
initScene();
initLight();
initControls();
initModel();
window.addEventListener( 'dblclick', onMouseClick, false );
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderScene();
}
window.onresize = function () {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
cameraCube.updateProjectionMatrix();
}