threejs加载3d模型怎样控制鼠标点击选中某个模型

mxn0829 2013-06-05 03:52:28

鼠标移动目前可以控制移动场景，但不知道怎样实现点击选中模型，有没有哪位大侠可以指点一下，或者有类似这样例子的给一个

...全文

2142 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yrbin666 2014-08-19

打赏
举报

回复

用raycaster这个类，例子里面有http://threejs.org/examples/#webgl_interactive_draggablecubes

siyi1522778738 2014-05-27

打赏
举报

回复

楼主，现在知道了么，教教我啊~~

mxn0829 2014-04-04

打赏
举报

回复

为什么没有人回答

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

three官方的几何体也就那么几个，想要生成各种各样的模型，其难度十分之大，这时引入外部模型也不失为一种选择。具体引入办法如下。初始化场景 this.scene = new THREE.Scene(); //新建场景 let width = window.innerWidth; //窗口宽度 let height = window.innerHeight; //窗口高度 let k = width / height; //窗口宽高比 this.c

在上一篇文章介绍了射线和射线投射器Raycaster使用，了解了射线拾取的核心原理。要实现鼠标点击选中模型的功能，还缺失关键的一步——如何将鼠标的2D屏幕坐标转换为三维空间坐标，并以此坐标为原点，相机与该坐标连线方向为射线方向检测这条射线与场景中模型是否相交。本教程将介绍该核心步骤实现。通过本教程，你应该已经了解了射线（Ray）、射线拾取模型（Raycaster）、屏幕坐标转标准设备坐标的相关概念和实现方法，以及相关 API 的使用。

<template> <div class="earth-container"> <div id="container" class="container" ref="container" /> </div> </template> <script> import * as THREE from "three"; import { GLTFLoader } from "thr...

本文详细介绍如何基于threejs在三维场景中使用FlyControls相机控制器，亲测可用。希望能帮助到您。一起学习，加油！加油！

其他开发语言

3,425

社区成员

15,624

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章