在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象要使用RayCaster，用于在三维空间中进行鼠标拾取，原理是：相机与鼠标所在的设备坐标之间的连线经过哪些物体。
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onMouseMove( event ) {
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
// 通过摄像机和鼠标位置更新射线
raycaster.setFromCamera( mouse, camera );
// 计算物体和射线的焦点
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);特别注意
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
是针对全屏的情况，如果是一个div范围，窗口的宽度与高度要改成div的宽度与高度，event.clientX与ent.clientY也要改成event.layerX 与event.layerY
如果我们要区别点的是哪个物体，要为这个物体设置一个name 属性
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f", name: spriteName }));
sprite.position.set(0, 2, 5);
sprite.scale.set(20, 2, 1);
sprite.name = spriteName;在点击的时候显示这个名字
alert(selectObject.name)也可以根据名称不同展示不同的数据 或者跳转到另一个页面
window.location.href = "test111.html";完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - raycast - sprite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0;
}
.canvasWrap {
width: 1000px;
height: 500px;
background: gray;
}
</style>
</head>
<body>
<div id="title" style="display:none;">this is the title</div>
<div class="canvasWrap" id="canvasWrap"></div>
<script src="../../build/three.js"></script>
<script src="../js/controls/OrbitControls.js"></script>
<script>
var renderer, scene, camera;
var controls, group;
var spriteName = "quanju naem"
init()
animate()
var widht, height;
function init() {
width = document.getElementById('canvasWrap').clientWidth;
height = document.getElementById('canvasWrap').clientHeight;
//init renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
document.getElementById('canvasWrap').appendChild(renderer.domElement);
//init scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
console.log(scene.position) // Vector3 {x: 0, y: 0, z: 0}
group = new THREE.Group();
scene.add(group);
//int camera
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(15, 15, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableRotate = true;
//add sprites
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f" }))
sprite.position.set(6, 5, 5);
sprite.scale.set(2, 5, 1);
sprite.name = spriteName + " 1";
group.add(sprite);
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "green" }));
//sprite.material.rotation = Math.PI/3*4; //等同于(Math.PI/3)*4逆时针旋转240度
sprite.position.set(8, -2, 2); //感觉position的位置是精灵的中心在三维坐标中的位置
sprite.center.set(0.5, 0.5); //精灵的center设定是基于精灵的大小的，精灵的的左下角为（0,0），x轴的右边与y轴的上方为正
sprite.scale.set(1, -5, 1);
sprite.name = spriteName + " 2";
group.add(sprite);
var group2 = new THREE.Object3D();
//group2.scale.set(1,2,1);
group2.position.set(-5, 0, 0);
//group2.rotation.set(Math.PI/2,0,0);
group.add(group2);
//var sprite = new THREE.Sprite(new THREE.SpriteMaterial({color:"#69f",name:"hihi"}));
var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: "#69f", name: spriteName }));
sprite.position.set(0, 2, 5);
sprite.scale.set(20, 2, 1);
sprite.name = spriteName;
//sprite.center.set(-0.1,0);
//sprite.material.rotation = Math.PI/3;
group2.add(sprite);
window.addEventListener("resize", onWindowResize, false);
window.addEventListener("click", onDocumentMouseMove, false)
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate)
}
function onWindowResize() {
width = document.getElementById('canvasWrap').clientWidth;
height = document.getElementById('canvasWrap').clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
var selectObject = null;
function onDocumentMouseMove(event) {
event.preventDefault();
if (selectObject) {
console.log(selectObject);
selectObject.material.color.set("#69f");
selectObject = null;
}
var intersects = getIntersects(event.layerX, event.layerY);
if (intersects.length > 0) {
var res = intersects.filter(function(res) {
return res && res.object
})[0];
if (res && res.object) {
//console.log(res)
selectObject = res.object;
alert(selectObject.name)
selectObject.material.color.set("#ffc466")
var title = document.getElementById("title");
title.style.display = "block";
//window.location.href = "test111.html";
}
}
}
var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector2();
function getIntersects(x, y) {
//将鼠标位置转换成设备坐标。x和y方向的取值范围是(-1 to 1)
x = (x / width) * 2 - 1;
y = -(y / height) * 2 + 1;
mouseVector.set(x, y);
//通过摄像机和鼠标位置更新射线
raycaster.setFromCamera(mouseVector, camera);
// 返回物体和射线的焦点
return raycaster.intersectObject(group, true)
}
</script>
</body>
</html>RN混合开发，React Native与原生android和ios的交互通信
React-Native新版本（从原生发送消息到JS），Android/iOS原生模块给ReactNative发送事件,通知监听,通过DeviceEventEmitter，NativeEventEmitter通过原生应用通讯。
H5页面基于接口实现数据交互
对于现在APP开发来说，目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样，业界对于H5和原生也有不小的争论。对于前者的争论在于PC端，后者在于移动端上体现。
设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢？
明明可靠颜值吃饭，却偏偏要靠才华立身，UI设计师就是这样一群神奇的物种。面对“大的同时小一点”、“五彩斑斓黑”、“下班之前给我”……这些甲方大大刁钻的需求，设计师每天都在咬牙微笑讨生活。
H5必知必会之与App交互
本文将就此主题深入探讨H5与App交互的几种常见模式。首先声明，本文涉及的H5与App交互协议和模式没有什么特别独到之处，相反，它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。
网站交互、开发方式和前端框架介绍
这个世界唯一不变的可能就是变化，历史的车轮滚滚向前，它不会因任何人的消极缓慢而停止。时代抛弃你时，连一声再见都不会说。从最开始的Javascrpit、到后来的Jquery、（ExtJs、EasyUI、MiniUI）、Bootstrap、Layui
前后端交互技术有哪些
我们都知道，一个完整的IT项目是由多个不同岗位的成员共同完成，包含UI规划、前端开发、后端开发、测验等。为了完成项目的完整性，前后端需求运用技能完成联通。不过，前后端交互技能有哪些呢？
CSS 状态管理，玩出花样了！
CSS用于交互的方式无非就那么几种：伪类：:hover、:link、:active ...动画：animation过渡动画：transition，这些交互方式组合起来，真的可以玩出一些花样，例如我们本文的主题，CSS的状态管理
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!