关于THREE.JS使用中的一系列小问题

异智宇宙 动手写第一个 Three.js... 最后由 异智宇宙 于2016年05月14日回复

  • 5 解决
  • 3.6k 浏览

问题1、我想要在用户点击3d物体的时候,该物体周边发出黄光之类的能标示该物体已被选中的效果,如何实现?现已能够通过射线获取目标点击物体,如果用2d绘画,我需要得知该物体转换成2d周边的坐标点,但我并不知THREE.JS有什么函数可以实现这个,还请老师赐教

问题2、老师示例中加载的模型可以通过临时函数的方式传递加载的物体,并对该物体执行一些操作,但我想把该物体放到全局变量中发现不可行,实验结果如下

QQ图片20160511175325.png

QQ图片20160511173728.png

问题3、就算上图在临时函数中成功的让相机看向PLAYER,但只是初始状态,实际情况如下

QQ图片20160511175853.png

望老师能够详尽解答,不甚感激

  • huqingchao 2016年05月13日 回答 #1楼
  • 问题1)你说的选中效果,有多种显示方式,轮廓高亮是比较好的一种。这个轮廓用纯2D绘制比较麻烦,用3D实现会更容易一些。具体3D实现有两种思路,第一种是额外添加一个模型的副本,使其位于原模型背后显示,并赋予如黄色的基本材质,同时缩放扩大一点点,这样就有边框的效果了,简单粗暴,非常有效。如果你不想太麻烦,这种方法是有人在用的一种方法,虽然技术含量不算高,但是很有用。具体网上也有现成的Three.js实现,演示网址为 http://stemkoski.github.io/Three.js/Outline.html ,源码可以进入 https://github.com/stemkoski/stemkoski.github.com 探究。

    Clipboard Image.png

  • 0 评论
  • huqingchao 2016年05月13日 回答 #2楼
  • 第二种实现比较复杂,也有些技术含量,目前我没有找到现成的演示,不过思路还是很清晰的。具体可以阅读以下文档。

    https://en.wikipedia.org/wiki/Cel_shading

    The Utah Teapot rendered using cel-shading.

    Cel shading composite final image.png

    这种比较复杂一些,当然你有兴趣,可以研究一下。

  • 0 评论
  • huqingchao 2016年05月13日 回答 #3楼
  • 问题2)你的问题我没有仔细推敲其逻辑,不过据经验而言,应该是异步处理不当导致。我在例子中,实现声明了全局变量,然后在临时函数中使用,这个是没有问题的。只要保证使用的时候,变量已经被定义和赋值,就不会出问题。你那里出问题,主要是因为时机不对,没有处理好异步的关系。比如你发的第一个图,loader.load调用以后,下面一句你就直接使用player了,但实际上loader.load还没有调用返回,因为是异步的,你也不知道他什么时候执行结束。所以,我在例子中,在他确确实实返回以后才处理的,这就是关键所在。关于异步处理的问题,你再自己摸索一下,这不是Three.js的范围。

  • 0 评论
  • huqingchao 2016年05月13日 回答 #4楼
  • 问题3)这个跟相机控制器的使用有关。相机控制器用来控制相机的视角,他是通过鼠标和键盘来处理输入的,他有自己的一套状态数据。而你用代码为处理相机,是另外一套,这两者会有冲突。所以你虽然一开始为相机设置了方向,但是相机控制器并没有知觉,依然用自己的初始数据来处理,完全忽略了你一开始的代码效果。两个人同时对一个人下不同命令,如果没有分身术,是无法同时执行的。

    你可以尝试设置相机控制器的参数或数据。试试看。

  • 0 评论
  • 异智宇宙 2016年05月14日 回答 #5楼
  • #4楼   @huqingchao

    感谢老师如此详尽的回答,相机控制器的旋转中心点的设置我试过各种方法也没找到,搜索引擎都翻遍了,还望老师明示

    QQ图片20160514164705.png

  • 0 评论