ThreeJs 选中物体事件
选中物体变红色demo:
https://threejs.org/examples/#webgl_raycast_sprite
<!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 {
font-family: Monospace;
font-size: 13px;
text-align: center;
margin: 0px;
background-color: #fff;
overflow: hidden;
}
#info{
position: absolute;
z-index: 1;
width: 100%;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
<script src="https://threejs.org/build/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
var renderer, scene, camera;
var controls, group;
init();
animate();
function init() {
// init renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// init scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff ); // init 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; group = new THREE.Group();
scene.add(group); geometryP = new THREE.BoxGeometry(10,10,10);
var materialP = new THREE.MeshBasicMaterial( { color: 0x0000ff ,side:THREE.DoubleSide} );
circleP = new THREE.Mesh( geometryP, materialP );
circleP.position.set(-80, -40, 0);
//geometryP.rotateY(Math.PI/2);
var group1 = new THREE.Group();
group.add(group1);
group1.add(circleP); geometryP1 = new THREE.BoxGeometry(-10,-10,10);
var materialP1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,side:THREE.DoubleSide} );
circleP1 = new THREE.Mesh( geometryP1, materialP1 );
var group2 = new THREE.Group();
group.add(group2);
group2.add(circleP1); window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener( "mousemove", onDocumentMouseMove, false );
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var selectedObject = null;
function onDocumentMouseMove( event ) {
event.preventDefault();
if ( selectedObject ) {
selectedObject.material.color.set( '#69f' );
selectedObject = null;
}
var intersects = getIntersects( event.layerX, event.layerY );
if ( intersects.length > 0 &&selectedObject!=intersects[0].object) {
var res = intersects.filter( function ( res ) {
return res && res.object;
} )[ 0 ];
if ( res && res.object ) {
selectedObject = res.object;
selectedObject.material.color.set( '#f00' );
}
}
}
var raycaster = new THREE.Raycaster();
var mouseVector = new THREE.Vector3();
function getIntersects( x, y ) {
x = ( x / window.innerWidth ) * 2 - 1;
y = - ( y / window.innerHeight ) * 2 + 1;
mouseVector.set( x, y, 0.5 );
raycaster.setFromCamera( mouseVector, camera );
return raycaster.intersectObject( group, true );
}
</script>
</body>
</html>
From: https://www.cnblogs.com/xuejianxiyang/p/9732632.html
ThreeJs 选中物体事件的更多相关文章
- unity3d点击屏幕选中物体
原文 http://blog.csdn.net/mycwq/article/details/19906335 前些天接触unity3d,想实现点击屏幕选中物体的功能.后来研究了下,实现原理就是检测从 ...
- Unity合并选中物体的Mesh
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; pu ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- threejs点击事件
示例浏览地址:https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html 双击鼠标左键选中模型并显示信息 ...
- 实现 select中指定option选中触发事件
我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- 上下箭头选中 选项事件 JS
//上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function (event) { ...
- layui 监听checkbox 、radio、switch选中改变事件
form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log( ...
- input标签checkbox选中触发事件的方法
1.方法一 <input type="checkbox" onclick="checkboxOnclick(this)" /> <script ...
随机推荐
- iOS --UIScrollView的学习（三）自动轮播
1.前面两章讲的都是基本的用法,这次讲一下比较重要的功能分页和自动播放 2.UIPageControl--分页 2.1只要将UIScrollView的pageEnabled属性设置为YES,UIScr ...
- Asp.net的生命周期应用之IHttpModule和IHttpHandler
摘自:http://www.cnblogs.com/JimmyZhang/archive/2007/11/25/971878.html 从 Http 请求处理流程 一文的最后的一幅图中可以看到,在Ht ...
- Springboot第五篇：结合myBatis进行SQL操作
前提:和之前同样的,本篇会从前端和后台一起讲述关于SQL的select操作(其他操作原理大致类似,不多做解释了). 大致流程:前端通过AJAX将数据发送到后台的路由,后台路由会根据发送的数据进行SQL ...
- Sequential Minimal Optimization（SMO，序列最小优化算法）初探
什么是SVM SVM是Support Vector Machine(支持向量机)的英文缩写,是上世纪九十年代兴起的一种机器学习算法,在目前神经网络大行其道的情况下依然保持着生命力.有人说现在是神经网络 ...
- 在Azuer创建自己的Linux_VM
---恢复内容开始--- emm..就是想搭个自己的VPN去YouTube看看视屏找找资源什么的... (滑稽.jpg)然后发现似乎需要这个玩意儿 先去申请一个Azuer账户 然后根据要求一步步来就好 ...
- Struts1原理解析
1.浏览器发送http请求->web服务器. 2.web服务器将 请求进行解析. 3.web服务器解析后将请求转发给ActionServelet(总队长). 3.查询struts-config. ...
- C#(winform)实现不同DPI控件自适应1
1. PicBox控件 顺便一提关键字:stretch [stretʃ] vt. 伸展,张开 //控制pictureBox图片的显示格式 this.picClose.BackgroundImageLa ...
- [作业] Python入门基础---九九乘法表
1.while 循环 : x = 1 while x < 10: y = 1 while y <=x: print('%d*%d=%2d' % (y,x,x*y),end = '\t') ...
- Scrum 冲刺博客第八篇
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 对界面进行美化 今天计划完成的工作 连接数据库实现排行榜的基本功能 工作中 ...
- 分层 DAO层，Service层，Controller层、View层
前部分摘录自:http://blog.csdn.net/zdwzzu2006/article/details/6053006 DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务 ...