在Three中提供2D和3Dcss渲染器供用户使用，如果你希望将二维或三维物体和基于HTML的标签相结合，则这一渲染器将十分有用。在这里，各个DOM元素也被包含到一个CSS2DObject或CSS3DObject实例中，并被添加到场景图中。

1. CSS2DRenderer

1.1 构造函数

1.2 方法

2. CSS3DRenderer

2.1 构造函数

2.2 方法

3. CSS2DRenderer实现地月旋转

1. CSS2DRenderer

CSS2DRenderer是CSS3DRenderer（CSS 3D渲染器）的简化版本，唯一支持的变换是位移。
如果你希望将三维物体和基于HTML的标签相结合，则这一渲染器将十分有用。在这里，各个DOM元素也被包含到一个CSS2DObject实例中，并被添加到场景图中。

例如官方他提供的标签案例（label）：

通过HTML及CSS设置标签样式，并绑定至Three创建的物体中：

同理还有molecules分子案例：

1.1 构造函数

CSS2DRenderer()

1.2 方法

.getSize () : Object

返回一个包含有渲染器宽和高的对象。

.render ( scene : Scene, camera : Camera ) : undefined

使用camera渲染scene。

.setSize (width : Number, height : Number) : undefined

将渲染器的尺寸调整为(width, height).

2. CSS3DRenderer

CSS3DRenderer用于通过CSS3的transform属性，将层级的3D变换应用到DOM元素上。如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有趣。同时，它也可以将DOM元素与WebGL的内容相结合。
然而，这一渲染器也有一些十分重要的限制：

它不可能使用three.js中的材质系统。
同时也不可能使用几何体。

因此，CSS3DRenderer仅仅关注普通的DOM元素，这些元素被包含到了特殊的对象中（CSS3DObject或者CSS3DSprite），然后被加入到场景图中。

例如Three官方提供的元素周期表案例：

2.1 构造函数

CSS3DRenderer()

2.2 方法

.getSize () : Object

返回一个包含有渲染器宽和高的对象。

.render ( scene : Scene, camera : PerspectiveCamera ) : undefined

使用perspective camera渲染scene。

.setSize (width : Number, height : Number) : undefined

将渲染器尺寸重新调整为(width, height)。

3. CSS2DRenderer实现地月旋转

通过使用二维css渲染器实现官方地月围绕旋转及label标签的显示：

实现原理：

1）导入CSS2DRenderer, CSS2DObject；

2）添加提示标签；

3）实例化标签为CSS2DObject；

4）设置标签Object的位置；

5）将标签添加至物体中；

6）实例化css2d渲染器。

main.js：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {CSS2DRenderer,CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";let camera, scene, renderer, labelRenderer;const clock = new THREE.Clock();
const textureLoader = new THREE.TextureLoader();let moon;
let chinaLabel;
const raycaster = new THREE.Raycaster();
init();
animate();// 创建射线function init() {const EARTH_RADIUS = 1;const MOON_RADIUS = 0.27;camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,200);camera.position.set(0, 5, -10);scene = new THREE.Scene();// 设置直线光源const dirLight = new THREE.DirectionalLight(0xffffff);dirLight.position.set(0, 0, 1);scene.add(dirLight);const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white lightscene.add(light);// 设置地球实体const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16);const earthMaterial = new THREE.MeshPhongMaterial({specular: 0x333333,shininess: 5,map: textureLoader.load("textures/planets/earth_atmos_2048.jpg"),specularMap: textureLoader.load("textures/planets/earth_specular_2048.jpg"),normalMap: textureLoader.load("textures/planets/earth_normal_2048.jpg"),normalScale: new THREE.Vector2(0.85, 0.85),});const earth = new THREE.Mesh(earthGeometry, earthMaterial);// earth.rotation.y = Math.PI;scene.add(earth);//设置月球实体const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16);const moonMaterial = new THREE.MeshPhongMaterial({shininess: 5,map: textureLoader.load("textures/planets/moon_1024.jpg"),});moon = new THREE.Mesh(moonGeometry, moonMaterial);scene.add(moon);// 添加提示标签const earthDiv = document.createElement('div');earthDiv.className = "label";earthDiv.innerHTML = "地球";const earthLabel = new CSS2DObject(earthDiv);earthLabel.position.set(0,1,0);//相对于父级元素的位置earth.add(earthLabel);// 中国const chinaDiv = document.createElement('div');chinaDiv.className = "label1";chinaDiv.innerHTML = "中国";chinaLabel = new CSS2DObject(chinaDiv);chinaLabel.position.set(-0.3,0.5,-0.9);earth.add(chinaLabel);console.log(chinaLabel)// 月球const moonDiv = document.createElement('div');moonDiv.className = "label";moonDiv.innerHTML = "月球";const moonLabel = new CSS2DObject(moonDiv);moonLabel.position.set(0,0.3,0);moon.add(moonLabel);// 实例化css2d的渲染器labelRenderer = new CSS2DRenderer();labelRenderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(labelRenderer.domElement)//设置样式labelRenderer.domElement.style.position = 'fixed';labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.left = '0px';labelRenderer.domElement.style.zIndex = '10';//设置层级renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const controls = new OrbitControls(camera, labelRenderer.domElement);controls.minDistance = 5;controls.maxDistance = 100;//window.addEventListener("resize", onWindowResize);
}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);labelRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {requestAnimationFrame(animate);const elapsed = clock.getElapsedTime();moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);// 通过射线设置标签隐藏const chinaPosition = chinaLabel.position.clone();// 计算出标签跟摄像机的距离const labelDistance = chinaPosition.distanceTo(camera.position);// 检测射线的碰撞// chinaLabel.position// 向量(坐标)从世界空间投影到相机的标准化设备坐标 (NDC) 空间。chinaPosition.project(camera);raycaster.setFromCamera(chinaPosition,camera);const intersects = raycaster.intersectObjects(scene.children,true)// console.log(intersects)// 如果没有碰撞到任何物体，那么让标签显示if(intersects.length == 0){chinaLabel.element.classList.add('visible');}else{// if(labelDistance)const minDistance = intersects[0].distance;console.log(minDistance,labelDistance)if(minDistance<labelDistance){chinaLabel.element.classList.remove('visible');}else{chinaLabel.element.classList.add('visible');}}// 标签渲染器渲染labelRenderer.render(scene,camera);renderer.render(scene, camera);
}

实现效果：

Three.js-CSS渲染器（CSS2DRenderer）相关推荐

Three.js之渲染器
本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRenderer DOMRenderer SVGR ...
three.js 渲染器更改背景色的几种方法
有两种渲染器 : var renderer=new THREE.CanvasRenderer(); 几何级别的渲染,兼容性更好 var renderer=new THREE.WebGLRen ...
HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...
Vue.js服务器端渲染与Vue路由器：分步指南
当我开始使用Vue收集有关SSR(服务器端渲染)的信息时,我必须从不同的文章以及官方文档中获取相关信息,以便全面了解这个主题. 以下是我在这些来源中发现的一些问题: 很多关于你应该拥有的信息的假设,比 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
Three.js PBR渲染入门教程
最近基于物理的渲染(PBR)已成为实时和电影3D场景渲染的行业标准方法.顾名思义,这种渲染技术基于现实世界物理定律,根据场景中的材料和照明设置来计算表面对光的反应方式.PBR是Disney公司为其动画 ...
CSS渲染原理，优化策略
一.css渲染原理(Cascading Style Sheets) 在介绍css渲染原理之前,我们简明扼要介绍一下页面的加载过程和浏览器渲染过程,有助于更好理解后续css渲染原理. 1.1页面的加载过 ...
CSS 渲染原理以及优化策略
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群推荐理由:由浅入深,鞭辟入里. 提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk ...
SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...

Three.js-CSS渲染器（CSS2DRenderer）

1. CSS2DRenderer

1.1 构造函数

CSS2DRenderer()

1.2 方法

.getSize () : Object

.render ( scene : Scene, camera : Camera ) : undefined

.setSize (width : Number, height : Number) : undefined

2. CSS3DRenderer

2.1 构造函数

CSS3DRenderer()

2.2 方法

.getSize () : Object

.render ( scene : Scene, camera : PerspectiveCamera ) : undefined

.setSize (width : Number, height : Number) : undefined

3. CSS2DRenderer实现地月旋转

Three.js-CSS渲染器（CSS2DRenderer）相关推荐

最新文章

热门文章