选中物体变红色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 选中物体事件的更多相关文章

  1. unity3d点击屏幕选中物体

    原文  http://blog.csdn.net/mycwq/article/details/19906335 前些天接触unity3d,想实现点击屏幕选中物体的功能.后来研究了下,实现原理就是检测从 ...

  2. Unity合并选中物体的Mesh

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; pu ...

  3. LayUI中select下拉框选中触发事件

    代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...

  4. threejs点击事件

    示例浏览地址:https://ithanmang.gitee.io/threejs/home/201807/20180703/02-raycasterDemo.html 双击鼠标左键选中模型并显示信息 ...

  5. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  6. Vue.js之下拉列表及选中触发事件

    老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...

  7. 上下箭头选中 选项事件 JS

    //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function (event) { ...

  8. layui 监听checkbox 、radio、switch选中改变事件

    form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log( ...

  9. input标签checkbox选中触发事件的方法

    1.方法一 <input type="checkbox" onclick="checkboxOnclick(this)" /> <script ...

随机推荐

  1. centos6.5安装docker（亲测）

    centos6.5下安装docker的过程办法 在看了网上N多复制粘贴的文章,又尝试无效后,我把我最终成功的办法发出来,希望能帮到拼命干环境的你. 操作环境: centos6.5(Final) 内核: ...

  2. 洛谷 P2473 [SCOI2008]奖励关(状压dp+期望)

    题面 luogu 题解 \(n \leq 15\) 状压 \(f[i][S]\)表示第\(i\)轮,吃过的集合为\(S\) 正着转移好像有点复杂 考虑逆推转移(正着转移应该也行) \(f[i][S]\ ...

  3. Haskell优雅的快排实现

    说得快速排序,基本是常用的排序当中速度最快的排序了,之前也用C和Java实现过,但是过程十分痛苦,更重要的是写完代码只记得过程却对实质的过程觉得隔了一层纱,有种说不出的感觉.刚刚看一下Haskell实 ...

  4. 使用go写一个简单的exe文件

    工作需要一个小工具给分析师用,原先打算写一个脚本的,但是呢我又不会用python,要写的话只能用java来实现(打包成可执行jar,使用java -jar 的命令来执行,当然得安装jdk).这种命令行 ...

  5. 05-树9 Huffman Codes （30 分)

    In 1953, David A. Huffman published his paper "A Method for the Construction of Minimum-Redunda ...

  6. Altium Designer安装孔周围放置圆形Polygon Pour Cutout

    1.  在Keep-Out层画2个圆, 中间的圆用作安装孔, 外圆做为禁止覆铜层. 这样做的好处是,放好安装孔后, 外面禁止覆铜层也覆不上铜, 防止螺钉与覆铜接触. 2. 选中外圆, Tools -& ...

  7. mysql grant权限总结

    2019-01-07 转自 https://blog.csdn.net/wulantian/article/details/38230635 一．权限表 mysql数据库中的3个权限表:user .d ...

  8. mono for android生成APK出现错误fatal error in gc 解决方案

    laxknight 标签: mono for android,fatal error in gc mono for android生成APK出现这个错误fatal error in gc collec ...

  9. （转）史上最全的MSSQL复习笔记

    1.什么是SQL语句 sql语言:结构化的查询语言.(Structured Query Language),是关系数据库管理系统的标准语言. 它是一种解释语言:写一句执行一句,不需要整体编译执行.语法 ...

  10. hibernate基本配置

    将讲解表名类名不一致.属性名列名不一致.不持久化某属性.Date类型的注解.枚举类型的注解(枚举类型在xml配置有点麻烦不说了),说明都在代码注释里. 项目目录: 注解方式以Teacher类为例,xm ...