threejs个人笔记

材质选择

从左往右依次对应

MeshBasicMaterial（基础材质，不受光照影响）
MeshStandardMaterial（PBR标准材质）
MeshPhongMaterial（高光材质，适用于陶瓷，烤漆类质感）
MeshToonMaterial（卡通材质，俗称三渲二）
MeshStandardMaterial（PBR标准材质模拟金属反射）

设置物体旋转方向和位置

 //设置位置
plane.position.x=10;
plane.position.y=10;
plane.position.z=10;

plane.position.set(10,10,10)

plane.position=new THREE.Vector3(10,10,10)
//缩放
plane.scale.set(0.5, 0.5, 0.5);
//旋转
plane.rotation.x = -0.5 * Math.PI;

plane.rotation.set(-0.5 * Math.PI,0,0)

plane.rotation=new THREE.Vector3(-0.5 * Math.PI,0,0)
//如果想使用度数（0到360）设置旋转。
var degrees=45
var inRadius=degree * (Math.PI/180)
//平移
plane.translateX(4)

获取模型长宽高

假设存在的Mesh对象，。我们可以创建一个BoundingBox并将其设置为mesh的BoundingBox：

var box = new THREE.Box3();
box.setFromObject( mesh );

使用box对象的getSize()方法来获取物体的宽度、高度和深度：

var size = new THREE.Vector3();
box.getSize( size );
console.log( "Width: " + size.x + ", Height: " + size.y + ", Depth: " + size.z );

另外，可以使用box对象的getCenter()方法来获取物体的中心点。这可以用于将其放置在屏幕中心等位置。

var center = new THREE.Vector3();
box.getCenter( center );
console.log( "Center: " + center.x + ", " + center.y + ", " + center.z );

最后，如果需要将物体缩放到指定的大小，可以使用scale属性：

var desiredSize = 10;
mesh.scale.set( desiredSize / size.x, desiredSize / size.y, desiredSize / size.z );

我们假设想要将物体的最大维度缩放到10。我们通过计算求得物体当前的尺寸，并计算缩放比例，然后将缩放应用于物体的scale属性中。

label鼠标事件

//鼠标移入
   labelModel.element.getElementsByClassName("label-style")[0].addEventListener("pointerenter", function (e) {
   })
//鼠标移出
pointerleave
//鼠标点击
pointerdown

显示渲染引擎当前处理的多边形数量

  console.log("Number of Triangles :", renderer.info.render.triangles);

获取模型中心点

  const geometry = new THREE.CylinderGeometry(10, 10, 200, 32);
  const material = new THREE.MeshBasicMaterial({
    color: 0xffff00 });
  const cylinder = new THREE.Mesh(geometry, material);
  cylinder.position.set(0, 100, 0);
  cylinder.name = "cylinder";
  scene.add(cylinder)

  const box = new THREE.Box3().setFromObject(cylinder)
  console.log(box);

  // geometry.computeBoundingBox()
  let boxHelper = new THREE.Box3Helper(box, 0xffff00);
  scene.add(boxHelper);

添加坐标轴

 var axes = new THREE.AxesHelper(20);
    scene.add(axes);

精灵材质报警效果

  let texture = new THREE.TextureLoader().load("../assets/img/j5.png");
  let material = new THREE.SpriteMaterial({
   
    //创建精灵材质
    map: texture, // 赋值贴图
    color: "#ff0000", // 设置颜色
    transparent: true, // 是否开启透明度
    opacity: 1, // 设置透明度
    depthWrite: false, // 深度写入
  });
  const sprite = new THREE.Sprite(material); //创建精灵，精灵永远朝向相机
  sprite.position.set(100, 100, 0);
  scene.add(sprite);

    let circle_n = 0;
  animate();
  function animate() {
   
    requestAnimationFrame(animate);
    circle_n = circle_n > 20 ? 0 : circle_n + 0.2;
    sprite.scale.set(0.5 * circle_n + 0.5, 0.5 * circle_n + 0.5, 0.5 * circle_n + 0.5);
    if (sprite.material) {
   
      sprite.material