three.js基础笔记

three.js基础对象
    渲染器对象、场景对象、摄像机、三维坐标轴、全局光源、几何体、材质对象、网格对象、组容器（Group对象）
初始化：
新建渲染器对象、场景对象、摄像机、全局光源、Group对象/网格对象
创建网格对象
    //几何体
    this.geometry = new THREE.BoxGeometry(10,20,10) 
    //网格基础材质 (MeshBasicMaterial)    
    this.material = new THREE.MeshLambertMaterial({color:0xff2288})   
    //几何体和材质组合  新的网格对象
    let cobe = new THREE.Mesh(this.geometry,this.material)  

    // 创建组容器  （group对象)（非必须）
    let group = new THREE.Group();
    //将网格对象添加到组容器
    group.add(cobe)
    
    // 新建场景对象
            this.scene = new THREE.Scene();
    // 将网格对象或组容器添加到场景对象中
           this.scene.add(cobe)    //this.scene.add(group)
    // 新建三维坐标轴  
            var axes = new THREE.AxesHelper(100);
    // 将坐标添加到场景中
            this.scene.add(axes);

   // 新建一个光源  该光源作用于全局对象
            let ambienLight = new THREE.AmbientLight(0xdddddd);
   // 将全局光源添加到场景中
            this.scene.add(ambienLight);

    // 新建渲染器对象
            this.render = new THREE.WebGLRenderer({
                antialias: true, //处理锯齿
                logarithmicDepthBuffer: true, //处理重影
            });
    
    // 新建摄像机
            this.camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                0.001,
                10000000
            );

    // 更新视图
        this.renderScene();

methods: {
        renderScene() {
            requestAnimationFrame(this.renderScene);
            this.render.clear();
            this.render.render(this.scene, this.camera);
        },
}

//文字转图片加载到模型贴图

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 240;
canvas.height = 360;
//制作矩形
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 240, 360);
//设置文字
ctx.fillStyle = "#000";
ctx.font = 'normal 20px "楷体"';
ctx.textAlign = "center";
ctx.fillText('插入的文字', 120, 40);

//生成图片
let url = canvas.toDataURL("image/png");
//将图片构建到纹理中
let geometry = new THREE.PlaneGeometry(1, 1);
let material = new THREE.MeshBasicMaterial({
	map: new THREE.TextureLoader().load(url),
	side: THREE.DoubleSide,//材质双面显示
	opacity: 1,
});
let rect = new THREE.Mesh(geometry, material);

//添加背景及环境贴图

addBackground(){
        // 添加背景
    var envMapTexture = new THREE.CubeTextureLoader().load([
        '/static/img/px.jpg', // right
        '/static/img/nx.jpg', // left
        '/static/img/py.jpg', // top  1
        '/static/img/ny.jpg', // bottom
        '/static/img/pz.jpg', // back
        '/static/img/nz.jpg', // front
    ]);
    var envMapTexture1 = new THREE.CubeTextureLoader().load([
        '/static/img/none.jpg', // right
        '/static/img/none.jpg', 
        '/static/img/none.jpg', 
        '/static/img/none.jpg', 
        '/static/img/none.jpg', 
        '/static/img/none.jpg', 
    ]);
    scene.background = envMapTexture
    // 环境贴图
    scene.environment = envMapTexture1
},

//添加阴影

addShadow(){
      renderer.shadowMap.enabled = true
      // renderer.shadowMap.type = this.$Three.PCFSoftShadowMap
      this.light1.castShadow = true
      modelGroup.traverse(function (v) {
          if (v.isMesh) {
              // v.material.side = 0
              v.castShadow = true
              v.receiveShadow = true
          }
       })
},

//加载模型方法

export function getModel(data){
    return new Promise((resolve, reject)=>{
        let name = data.name
        let url = data.url
        let type = data.type
        let Loader = new GLTFLoader()
        if(type == 'glb' || type == 'gltf'){
            Loader = new GLTFLoader()
        }else if(type == 'fbx'){
            Loader = new FBXLoader(new Three.LoadingManager());
        }else if(type == 'STL'){
            Loader = new STLLoader();
        }else if(type == 'obj'){
            Loader = new OBJLoader(); 
        }
      Loader.load(url, (fbx) => {
        if(type == 'glb' || type == 'gltf'){
            fbx = fbx.scene
        }else if(type == 'STL'){
            var material = new Three.MeshStandardMaterial({  
                color: 0xffffff,  
                specular: 0xffffff,  
                roughness: 0, // 粗糙度为0-1  值越大越粗糙 
                shininess: 100  
            });
            fbx = new Three.Mesh(fbx, material)
        }else if(type == 'fbx'){
            
        }else if(type == 'obj'){
            
        }
        fbx.name = name
        resolve(fbx)
      },(xhr)=>{
        console.log("加载进度：",xhr.loaded,xhr.total)
      });
    })
}