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

动态修改透明度

  new TWEEN.Tween(getObjectName("waike_(1)").material)
      .to({
    opacity: 0.3 }, 2000) // 在1秒内改变到目标透明度
      .easing(TWEEN.Easing.Quadratic.Out) // 使用一个缓动函数
      .onUpdate(function () {
   
        // 每次tween更新时，都会调用这个函数
        // 在这里，我们只是简单地更新材质的透明度
        getObjectName("waike_(1)").material.needsUpdate = true; // 告诉Three.js我们需要更新材质
        getObjectName("waike_(1)").material.transparent = true; // 告诉Three.js我们需要更新材质
      })
      .start();

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

  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.opacity = circle_n === 0 ? 1 : sprite.material.opacity - 0.006;
    }
  }

设置材质为线框 wireframe:true

var cubeMaterial = new THREE.MeshBasicMaterial({
   
        color: 0xFF0000,
        wireframe: true
    });

开启灯光阴影

spotLight.castShadow = true;

// 灯光阴影
// 1、材质要满足能够对光照有反应
// 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;
// 3、设置光照投射阴影 directionalLight.castShadow = true;
// 4、设置物体投射阴影 sphere.castShadow = true;
// 5、设置物体接收阴影 plane.receiveShadow = true;

注：接受阴影材质

 const material = new THREE.MeshPhongMaterial({
    color: 0x808080, side: THREE.DoubleSide });

开始物体阴影

sphere.castShadow = true;

开启平面接受阴影

plane.receiveShadow = true;

开启渲染器阴影

renderer.shadowMap.enabled = true;

控制阴影精细程度

spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
spotLight