一.css渲染器基本使用

使用场景：经常在一些3D物体左右还会跟随一些文字等，实际都是标签，应用场景非常广泛

先完成基本的3D，月球围绕地球转，这里就是给月球加了sin函数

然后现在就先创建一个标签体出来

2D渲染器出了暴露出来一个渲染器还有一个对象器

但是到这里并不会显示出来，还要创建2D渲染器跟渲染器差不多

这样就是出来两个一样大小的元素，但是需要重叠一下

设置固定定位，并且跟随render一起渲染

如果发现此时由于2D渲染器在上面，导致3D的缩放旋转等不生效

二.添加多个元素标签跟随物体移动

首先添加月球div

给月球添加上后会自动跟着球体走

再在地球上标注中国

这里需要注意一下，如果想字跟着转动走，需要设置xyz轴，特别是z轴

三.使用射线碰撞来检测标签显示隐藏

在刚才的案例中有两个问题

一个是当我们调整浏览器视图尺寸，文字的定位就出现问题了

这个需要在不断运动中，重新计算2D渲染器尺寸就可以了

第二个是，当我们移动到美洲这边，中国都被挡住了，但是文字还在

这里的思路是这样的

从中国两个字和摄像机打一条射线过去，通过穿过的物体来判断，先判断有没有，如果没有就要显示，因为穿过去没有物体只有两种情况

一个是中国在最左边，一个是在最右边此时射线穿过去，是没有物体的，但是这个时候中国已经出来了所以要显示

然后是有的情况下，有的情况下，文字在前和在后，射线穿过去都会有，这个时候我们通过文字到摄像机的距离和物体到摄像机的距离判断，如果物体到摄像机的距离比文字还要小，说明文字在背后去了不显示，这里注意3D物体有个方法可以计算到某一个点的距离

实例化射线

ThreeJs-14HTML混合3D渲染的更多相关文章

  1. 初探Stage3D(一) 3D渲染基础原理

    关于本文 本文主要想介绍一下3D渲染的基本流程,及怎样把一个三角形(0,1,0),(1,0,1),(0,0,1)最终渲染到屏幕上来.文章的目的是对3D渲染流程做一个简单的介绍,其中不涉及任何语言的AP ...

  2. Threejs 使用的3D格式

    3D格式你可以通过任意软件导出(.3ds,dae等),但是threejs 无法使用, 1,http://www.blender.org/ 下载这款开源的3d软件 2,https://github.co ...

  3. threejs 组成的3d管道，寻最短路径问题

    threejs 里面的3d管道的每个节点ID是唯一的,且对应x,y,z坐标.那么当需要从A点到B点的时候,可能出现有多条路径可走,此时便需要求出最短行走路径,因此用到一个寻路径算法.我们将问题简化如下 ...

  4. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  5. 基于 HTML5 Canvas 的 3D 渲染引擎构建机架式服务器

    前言 今天找到了 HT 的官网里的 Demo 网站( http://www.hightopo.com/demos/index.html ),看的我眼花缭乱,目不暇接. 而且 HT 的用户手册,将例子和 ...

  6. 3D渲染集群，你了解多少？

    摘要:渲染是批处理运行模式,那能不能使用Docker容器技术,做大规模的渲染集群呢? 我们先说说3D渲染涉及哪些领域: 1.什么是3D渲染 简单粗暴的讲:就是将虚拟世界里的3D模型,变为(人眼看到)平 ...

  7. 【实时渲染】实时3D渲染如何加速汽车线上体验应用推广

    在过去,一支优秀的广告片足以让消费者对一辆汽车产生兴趣.完美的底盘线条或引擎的轰鸣声便会让潜在买家跑到经销商那里试驾.现在,广告还是和往常一样,并没有失去其特性,但86%的买家在与销售交流之前会在网上 ...

  8. 3D渲染

    3d渲染的本质是在三维坐标系中绘制很三角形,用三角形拼成物体,然后投影到二维图像上,所以做渲染就是画好这些三角形;3d渲染输入的是很多三角形的3个顶点和属性,输出的是一张2d图.画好三角形要研究给三角 ...

  9. 从《BLAME！》说开去——新一代生产级卡通真实感混合的渲染方案

    <BLAME!>是Polygon Pictures Inc.(以下简称PPI)创业33周年以来制作的第一部CG剧场电影,故事来自于贰瓶勉的同名漫画作品(中文译名为<探索者>或者 ...

  10. Flash3D学习计划(一)——3D渲染的一般管线流程

    一:什么是渲染管线 渲染管线也称为渲染流水线,是显示芯片内部处理图形信号相互独立的并行处理单元.一个流水线是一序列可以并行和按照固定顺序进行的阶段.每个阶段都从它的前一阶段接收输入,然后把输出发给随后 ...

随机推荐

  1. 《Django 5 By Example》阅读笔记：p237-p338

    <Django 5 By Example>学习第11天,p237-p338总结,总计102页. 一.技术总结 1.follow system(关注功能) 表之间的关系有三种:OneToOn ...

  2. 将ipynb文件转成pdf

    本文内容:将GitHub上ipynb源码格式的书籍转成pdf 应用场景:GitHub上某些书籍按章节使用ipynb格式存储 (Jupyter创建了一种良好的交互方式,即将程序说明和代码放在同一个文档中 ...

  3. Tailwind CSS样式优先级控制

    前情 Tailwind CSS 是一个原子类 CSS 框架,它将基础的 CSS 全部拆分为原子级别,能达到最小化项目CSS.它的工作原理是扫描所有 HTML 文件.JavaScript 组件以及任何模 ...

  4. IO介绍-下

    中断 由外部设备引起的中断,称为外中断. 由内部错误引起的中断,称为内中断,或者是陷入.例如:非法指令,地址越界,电源故障等.   中断向量表 中断优先级 多中断源的处理方式 屏蔽中断 嵌套中断 根据 ...

  5. PCB设计AD规则设置(按照嘉立创设置)

    本文转载自https://blog.csdn.net/subtitle_/article/details/121648972 官方参考https://www.jlc.com/portal/vtechn ...

  6. 01编程语言简介与C++

    编程语言是编程的工具 计算机系统是分层的 图1: 图2: 编程语言是软件,也是分层的 图3: 图4: 图5: 图6: visual studio.vscode .dev-c++是三种用于C++编程的集 ...

  7. T语言开发笔记1

    为什么会有开发语言的想法 在2012年,我准备开发一个给前端切图使用的屏幕取色器. 需求很简单,前端经常需要获取设计稿特定位置的颜色代码.虽然当时 PhotoShop 提供了内部取色器,但操作麻烦,而 ...

  8. 龙哥量化：TB交易开拓者_趋势跟踪策略_多策略对单品种_A00011880206期货量化策略，严格的用样本内参数， 跑样本外数据，滚动测试未来行情

    如果您需要代写技术指标公式, 请联系我. 龙哥QQ:591438821 龙哥微信:Long622889 也可以把您的通达信,文华技术指标改成TB交易开拓者的自动交易量化策略. 量化策略介绍 投资标的: ...

  9. [转]为什么VS提示SurfFeatureDetector不是cv的成员函数

    surf和sift算法都是在头文件#include <opencv2/features2d/features2d.hpp>中,但在新的opencv版本出来后,如果仍然使用这个头文件就会出现 ...

  10. 一套分布式IM即时通讯系统的技术选型和架构设计

    本文由冰河分享,作者博客 binghe.gitcode.host,原题"这套分布式IM即时通讯系统如何写到简历上?我给你整理好了!",本文有修订和改动. 1.引言 分布式IM即时通 ...