threeJS快速入门-下

标准网格材质

在上一篇中材质用的是MeshBasicMaterial，这种材质简单，不受光照的影响。一般在开发工程中使用MeshStandardMaterial较多，这是一种基于物理的标准材质，它对光照有相应的效果。

const geometry = new THREE.SphereGeometry(1,32,32);
const material = new THREE.MeshStandardMaterial({
    color:0x00ff00
})
const mesh = new THREE.Mesh(geometry,material)

光

环境光

点光源

平行光

聚光灯

聚光灯指定物体

light.target = targetObject;

灯光与阴影

CSS3D渲染器

CSS3DRenderer用于通过CSS3transform属性， 将层级的3D变换应用到DOM元素上。

这一渲染器也有一些十分重要的限制：

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

import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
//css3D渲染器
const css3DRenderer  = new CSS3DRenderer();
css3DRenderer.setSize(window.innerWidth,window.innerHeight);
document.body.append(css3DRenderer.domElement);

//默认css3drender是与canvas并列，我们一般是将css3drenderer放到canvas上一层，以透明的形式
css3DRenderer.domElement.style.position = 'absolute';
css3DRenderer.domElement.style.top=0;
css3DRenderer.domElement.style.left=0;

//放置在上一层会导致3D图形的鼠标交互不起作用，所以需要设置下面
css3DRenderer.domElement.style.pointerEvents = 'none';
//创建原生的DOM对象，并把它转换成3D物体加到css3dRender中
const tag = document.createElement('span');
tag.innerHTML = '我是球体';
tag.style.color = 'red';

//将原生的DOM转换成3D物体
const dom3d = new CSS3DObject(tag);
//虽然没有材质和几何，但是可以使用postion,rotation,scale
dom3d.position.set(0,0,0);
//原生DOM转换成3d物体时，px作用在three.js中的单位是16
dom3d.scale.set(1/16,1/16,1/16)
scene.add(dom3d)

function animate() {
    //根据浏览器自动刷新，也就是自动调用animate方法，不断递归调用此渲染函数
	requestAnimationFrame( animate );
    //实时刷新渲染
    css3DRenderer.render(scene,camera);
}
animate()

CSS2D渲染器

CSS2DRenderer用法基本与CSS3DRenderer一致，但是只支持平移。

import { CSS2DObject, CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';

//css2D渲染器
const css2DRenderer  = new CSS2DRenderer();
css2DRenderer.setSize(window.innerWidth,window.innerHeight);
document.body.append(css2DRenderer.domElement);
//默认css2drender是与canvas并列，我们一般是将css2drenderer放到canvas上一层，以透明的形式
css2DRenderer.domElement.style.position = 'absolute';
css2DRenderer.domElement.style.top=0;
css2DRenderer.domElement.style.left=0;
//放置在上一层会导致3D图形的鼠标交互不起作用，所以需要设置下面
css2DRenderer.domElement.style.pointerEvents = 'none';
//创建原生的DOM对象，并把它转换成3D物体加到css2dRender中
const tag = document.createElement('span');
tag.innerHTML = '我是2D球体';
tag.style.color = 'red';
//将原生的DOM转换成3D物体
const dom2d = new CSS2DObject(tag);
//虽然没有材质和几何，只可以使用postion
dom2d.position.set(1,0,0);
//原生DOM转换成2d物体时，不会进行单位转换，还是默认px大小
scene.add(dom2d)

function animate() {
    //根据浏览器自动刷新，也就是自动调用animate方法，不断递归调用此渲染函数
	requestAnimationFrame( animate );
    //实时刷新渲染
    css2DRenderer.render(scene,camera);
}
animate()

精灵物体

//默认以public为根路径
const map = new THREE.TextureLoader().load( "bbwyLogo.png" );
const materialsprite = new THREE.SpriteMaterial( { map: map } );

const sprite = new THREE.Sprite( materialsprite );
scene.add( sprite );

类型	特点
CSS3D	可以随鼠标旋转、移动、缩放，不会被其他3D遮挡
CSS2D	大小、位置不变，不会被其他3D遮挡
精灵物体	大小、位置随鼠标移动，可以被其他3D遮挡

three.js中文手册