gltf.scne.getObjectByName('汽车').traverse(function(item){
    if(item.isMesh){
        item.material = obj.material.clone()
    }
})

// 加载环境贴图
// 加载周围环境6个方向贴图
// 上下左右前后6张贴图构成一个立方体空间
// 'px.jpg', 'nx.jpg'：x轴正方向、负方向贴图  p:正positive  n:负negative
// 'py.jpg', 'ny.jpg'：y轴贴图
// 'pz.jpg', 'nz.jpg'：z轴贴图
const textureCube = new THREE.CubeTextureLoader()
    .setPath('./环境贴图/环境贴图0/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
    // CubeTexture表示立方体纹理对象，父类是纹理对象Texture 

    // 集合体的边界线EdgesGeometry
    const geometryModle = new THREE.CylinderGeometry(2,2,32)
    const materialModle = new THREE.MeshLambertMaterial({
        color: 0x004444,
        transparent:true,
        opacity:0.5,
    })
    const mesh2 = new THREE.Mesh(geometryModle,materialModle)
    	scene.add(mesh2)
    const edgesGeometry = new THREE.EdgesGeometry(geometryModle,30)//第二次参数时发现角度大于	多少时才会渲染
    const edgesMaterial = new THREE.LineBasicMaterial({
        color: 0x00ffff,
    })
    const lineModle = new THREE.LineSegments(edgesGeometry,edgesMaterial)
    	scene.add(lineModle)
	// 同理相关模型也可以在加载完成后也可以添加边缘线。
modelLoader.load('./bwm/scene.gltf',(gltf)=>{
        gltf.scene.position.set(5,0,5)
        gltf.scene.traverse((item)=>{
            if(item.isMesh){
                item.material = new THREE.MeshLambertMaterial({//设置新的材质属性
                     color: 0x004444,
                     transparent: true,
                     opacity: 0.5,
                 })
                 const itemEdge = new THREE.EdgesGeometry(item.geometry)//创建外框线
                 const itemLineMaterial = new THREE.LineBasicMaterial({//线性材质
                     color: 0x00ffff,
                 })
                 const itemLine = new THREE.Line(itemEdge,itemLineMaterial)
                 item.add(itemLine)
            }
        })
       	scene.add(gltf.scene)//模型添加到场景中

const pointsV = new THREE.CatmullRomCurve3([
        new THREE.Vector3(20,10,5),
        new THREE.Vector3(0,0,0),
        new THREE.Vector3(-20,-15,-50),
    ])
    const pipeBackgroundImage = new THREE.TextureLoader().load(img)
    // pipeBackgroundImage.encoding = THREE.SRGBColorSpace
   // 设置阵列模式
    pipeBackgroundImage.wrapS = THREE.RepeatWrapping;
    pipeBackgroundImage.wrapT = THREE.RepeatWrapping;
    // uv两个方向纹理重复数量
    pipeBackgroundImage.repeat.set(1,1);//注意选择合适的阵列数量
    pipeBackgroundImage.encoding = THREE.SRGBColorSpace
    console.log(pipeBackgroundImage,'tuoian');
    const pipeline = new THREE.TubeGeometry(pointsV,65, 2, 25)
    const pipeMaterial = new THREE.MeshPhysicalMaterial({emissive:'#3f7b9d',side:THREE.DoubleSide,map:pipeBackgroundImage,clearcoat:1})
    const pipeMesh = new THREE.Mesh(pipeline,pipeMaterial)
    scene.add(pipeMesh)
 function animation(){
        pipeBackgroundImage.offset.x += 0.0001; //uv动画
        renderer.render(scene,camera)
        requestAnimationFrame(animation)
}
animation(){

// 1.创建一个三维贝塞尔曲线或者其他曲线
const peakCover = new three.CubicBezierCurve3(
  new THREE.Vector3(4,4,4),
  new THREE.Vector3(4,5,6),
  new THREE.Vector3(7,6,6),
)

//2.获取这个曲线上的所有点位 .getpoints() 参数将曲线分割为多少个点
const peackPoints = peackCover.getpoints(20)

//3.设置这些点位的颜色
let peackColors = []
for(let i =0;i<peackPoints.length;i++){
	const itemValue = i / peackPoints.length //等到这个点位对应的rgb
	peackColors.push(itemValue,0,1)
}

//4.设置集合体的顶点数据
const peackCoverGeotry = new three.BufferGeometry().setFromPoints(new Float32Array(peackColors),3)

//5.创建曲线材质
const peackCoverMaterial = new three.LineBasicMaterial({
 vertexColors:true,//使用顶点颜色渲染
 // color:'red'
})

//创建线条
const coverLine = new three.Line(peackCoverGeotry,peackCoverMaterial)
scene.add(coverLine)

//lerpColors
const c1 = new THREE.Color(0xff0000); //红色
const c2 = new THREE.Color(0x0000ff); //蓝色
const c = new THREE.Color();
// 颜色3.lerpColors(颜色1，颜色2，占比) 占比为两种颜色各占多少 但占比为0时到的颜色就是颜色1 占比为1时得到的颜色就是颜色2。 
c = c.lerpColors(c1,c2,占比Value)
// lerp(颜色1,占比value)
c1.lerp(c2,1)// 颜色1.lerp(颜色2,占比) 占比为颜色1与颜色2的占比 占比为0为颜色1， 占比为2时为颜色2

let c3 = c1.clone().lerColor(c1,c2,占比)//这里是先克隆在用插值修改这个颜色

//通过顶点数据 来将山体根据高度着色
modelLoader.load('shan2.glb',(gltf)=>{
       gltf.scene.position.set(5,0,5)
       console.log( gltf.scene);
       gltf.scene.scale.set(25,25,25)

       const zArr = [] //顶点数据组
       //遍历所有物体的顶点将塞入zArr
       gltf.scene.traverse(item=>{
           let itemAttributes = item.geometry.attributes//顶点属性
           let itemPosition = item.geometry.attributes.position//顶点位置数据
           //在位置数据中有一个count表示这个物体有多少个顶点
           for(let i = 0;i<itemPosition.length;i++){
               zArr.push(itemPosition.getZ(i))
           }
       })
       zArr.sort()//升序排序
       let minHeight = zArr[0]//山脚高度
       let maxHeight = zArr[zArr.length - 1]//山顶高度
       let height = maxHeight - minHeight //山体的高度
	let minColor = new THREE.Color(0x0000ff)//山脚颜色
       let maxColor = new THREE.Color(0xff0000)//山顶颜色
       //再次根据当前顶点个数进行循环 设置当前的顶点颜色
	gltf.scene.traverse(item=>{
       	let itemAttributes = item.geometry.attributes//顶点属性
           let itemPosition = item.geometry.attributes.position//顶点位置数据
           let colorArr = []
    		for(let i = 0;i<itemPosition.count;i++){
               let colorVal = (itemPosition.getZ(I) - minHeight) / height
               let c = minColor.clone().lerp(maxColor,colorVal)
               colorArr.push(c.r,c.g,c.b)
           }
           let float32Arr = new three.Float32Array(colorArr)
           itemAttributes.geometry.color = new three.BufferAttribute(float32Arr,3)
           
           item.material = new three.MeshLambertMaterial({
                vertexColors:true//开启顶点颜色
           })
       })
       
    })

OrthographicCamera( left, right, top, bottom, near, far )
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值2000
left 与 top 为负值

解释// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(width, height);
};

window.onresize = function () {
   // width、height表示canvas画布宽高度
 	 const width = canvas.clientWidth //canvas画布宽度
    const height = canvas.clientHeight //canvas画布高度		
 camera.aspect = canvas.clientWidth/canvas.clientHeight
 camera.updateProjectionMatrix();
 };

const k = width / height; //canvas画布宽高比
const s = 50; 
//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

// Canvas画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 1. WebGL渲染器渲染的Cnavas画布尺寸更新
    renderer.setSize(width, height);
    // 2.1.更新相机参数
    const k = width / height; //canvas画布宽高比
    camera.left = -s*k;
    camera.right = s*k;
    // 2.2.相机的left, right, top, bottom属性变化了，通知threejs系统
    camera.updateProjectionMatrix();
};

import cq from 'map.json' //地图的json数据

//地图使用的正投影相机
const width = canvas.clientWidth; //canvas画布宽度
   const height = canvas.clientHeight; //canvas画布高度
   const k = width / height; //canvas画布宽高比
   const s = 5;//控制left, right, top, bottom范围大小
   console.log(k*s,'ks');
   const camera = new THREE.OrthographicCamera(-k*s,k*s,s,-s,0.001,8000)
camera.position.set(10,10,10)
   camera.lookAt(0,0,0)
   scene.add(camera)

   let depth = 0.2//地图的深度
   //生成区县模块以及区县的边框
   cq.map(item=>{
       let v2 = []
       let v3 = []
       item.path.forEach(el => {
           v2.push(new THREE.Vector2(el[0],el[1]))
           v3.push(new THREE.Vector3(el[0],el[1],depth+0.0001))
       });

       let shape = new THREE.Shape(v2)
       let ShapeGeo = new THREE.ExtrudeGeometry(shape,{depth:depth,curveSegments:v3.length,bevelEnabled:false})
       let shapeMaterial = new THREE.MeshPhongMaterial({color:'#0a4287',opacity:1})
       let shapeMaterial2 = new THREE.MeshPhongMaterial({color:'#1b6ef3',opacity:1})
       let shaeMesh = new THREE.Mesh(ShapeGeo,[shapeMaterial,shapeMaterial2])
       shaeMesh.position.z = 0

       const areaLineGeo = new THREE.BufferGeometry().setFromPoints(v3)
       const areaLineMaterial = new THREE.MeshPhongMaterial({color:'#fff',})
       const areaLine = new THREE.Line(areaLineGeo,areaLineMaterial)
       console.log(shaeMesh);
       scene.add(areaLine)
       scene.add(shaeMesh)
   })
   console.log(cqoutLine);
   //创建一个重庆地图轮廓 以便于让地图居中
   let outLine = []
   cqoutLine.features[0].geometry.coordinates.forEach(item=>{
       console.log(item);      
       item[0].forEach(val=>{
           outLine.push(new THREE.Vector3(val[0],val[1],depth+0.0001))
       })
   })
   console.log(outLine,'新');
   const outLineGeo = new THREE.BufferGeometry().setFromPoints(outLine)
   const outLIneMaterial = new THREE.MeshBasicMaterial({color:'red'})
   const outLineMesh = new THREE.Line(outLineGeo,outLIneMaterial)
   // scene.add(outLineMesh)
   //包围盒 通过包围盒获取到物体的中心点
   camera.lookAt(0,0,0)
   camera.position.set(300,300,300)
   const mapBox = new THREE.Box3()
   let outLineBox = mapBox.expandByObject(outLineMesh)
   const center = new THREE.Vector3() //获取地图中心点
   outLineBox.getCenter(center)
   console.log(center,'center');
   //重新设置相机的观察中心点以及相机的位置。
   camera.lookAt(center.x,center.y,center.z)
   camera.position.set(center.x,center.y,50)
   //重新设置轨道控制器的中心点。需要手动update一下配置
   Controls.target.set(center.x,center.y,center.z);
   Controls.update();
   let mapBoxSize = new THREE.Vector3()//获取地图包围盒的大小
   outLineBox.getSize(mapBoxSize)
   const obj = new THREE.Object3D()
   obj.position.set(center.x,center.y,center.z)
   cqLight.target = obj

//相机选择透视相机，相机的仰角调试大一点管道中看的更多。45设置为90
cosnt coverLine = new three.CubicBezierCurve3(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( -5, 15, 0 ),
	new THREE.Vector3( 20, 15, 0 ),
	new THREE.Vector3( 10, 0, 0 )
)
//创建纹理
const textrue = new three.TextrueLoader().load('water.png')
textrue.warpS = three.RepeatWrapping //开启矩阵模式 水平平铺
textrue.repeate.x = 1

const coverMaterial = new three.MeshBasicMaterial({
    map:textrue,
    side: THREE.DoubleSide，//双面显示
})

//获取曲线上的点
const coverPoints = coverLine.getPoints(500)

let i = 0
function animation(){
	i+=1
    if(i < coverPoints.length - 1){
    	camera.position.copy(coverPoints[i])//相机位置在当前项
        camera.lookAt(coverPoints[i + 1])//相机朝向下一项
     }else{
        i = 0
     }
    renderer.render(scene,camera)
    requestAnimationFrame(animation)

 }

  animation()

 //光
   // 设置渲染器，允许光源阴影渲染
   renderer.shadowMap.enabled = true; 
   const light = new THREE.AmbientLight( 0x404040,10 ); // 柔和的白光
   const gui = new GUI();//创建GUI对象 
   gui.add(light, 'intensity', 0, 100).name('环境光.intensity');
   scene.add( light );
   //平行光
   const directionalLight = new THREE.DirectionalLight( 0xffffff,5)
   directionalLight.position.set(100,100,100),
   directionalLight.target.position.set(0,0,0)
   directionalLight.castShadow = true
   directionalLight.receiveShadow = true;
   console.log('阴影相机属性',directionalLight.shadow.camera);
   const directionalLightHelp = new THREE.DirectionalLightHelper(directionalLight,0xffffff)
   directionalLight.shadow.mapSize.set(2540,2540) //边缘的颗粒度
   directionalLight.shadow.radius = 5
   directionalLight.shadow.camera.left = -100;
   directionalLight.shadow.camera.right = 100;
   directionalLight.shadow.camera.top = 100;
   directionalLight.shadow.camera.bottom = -100;
   directionalLight.shadow.camera.near = 0.01;
   directionalLight.shadow.camera.far = 5000;

   // scene.add(directionalLightHelp)
   // 可视化平行光阴影对应的正投影相机对象
   const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
   scene.add(cameraHelper);
   // 可视化平行光
   const dirHelper = new THREE.DirectionalLightHelper( directionalLight, 5);
   scene.add( dirHelper );

const load = new GLTFLoader('模型1.gltf',gltf=>{
       gltf.scene.castShadow = true 
       scene.add(gltf.scene)
   })
   
   
  // gui调节阴影
   // 阴影子菜单
   const shadowFolder = gui.addFolder('平行光阴影');
   const cam = directionalLight.shadow.camera;
   // 相机left、right等属性变化执行.updateProjectionMatrix();
   // 相机变化了，执行CameraHelper的更新方法.update();
   shadowFolder.add(cam,'left',-500,0).onChange(function(v){
       cam.updateProjectionMatrix();//相机更新投影矩阵
       cameraHelper.update();//相机范围变化了，相机辅助对象更新
   });
   shadowFolder.add(cam,'right',0,500).onChange(function(v){
       cam.updateProjectionMatrix();
       cameraHelper.update();
   });
   shadowFolder.add(cam,'top',0,500).onChange(function(v){
       cam.updateProjectionMatrix();
       cameraHelper.update();
   });
   shadowFolder.add(cam,'bottom',-500,0).onChange(function(v){
       cam.updateProjectionMatrix();
       cameraHelper.update();
   });
   shadowFolder.add(cam,'far',0,1000).onChange(function(v){
       cam.updateProjectionMatrix();
       cameraHelper.update();
   });
// *做一个太阳的升起与降落：原理光源在绕着z轴进行旋转
let r = 100 //光源旋转半径
   let angle = 0 //光源的角度
   function animation(){
       angle+=0.01
   	directionalLight.position.y = r * Math.sin(angle)    
       directionalLight.position.x = r * Math.cos(angle) 
       
      	renderer.render(scene,camera)
       requestAnimationFrame(animation)
   }

// const texture = new THREE.TextureLoader().load('img/wa3.jpg')
const texture = new THREE.TextureLoader().load('img/xue.png')
const spriteMaterial = new THREE.SpriteMaterial({
    map:texture,
    // rotation:Math.PI/4,//旋转精灵对象45度，弧度值
    transparent:true,//SpriteMaterial默认是true
    })
const group = new THREE.Object3D()
for(let i = 0;i < 6000;i++){
    const sprite = new THREE.Sprite(spriteMaterial)
    sprite.scale.set(5, 5, 1)
    sprite.position.x = 500 * (Math.random() - 0.5)
    sprite.position.y = 250 * (Math.random())
    sprite.position.z = 500 * (Math.random() - 0.5)
    group.add(sprite)
}
scene.add(group)

const clock = new THREE.Clock()
function loop(){
    // 通过tranvers来循环修改比较卡
    // group.traverse(item=>{
    //     console.log(item,'w');
    //     item.position.y -=0.1
    //     if(item.position.y<0){
    //         item.position.y = 100
    //     }
    // })

    // 根据时间来设置相关位置 很卡
    // const t = clock.getDelta();// loop()两次执行时间间隔
    // group.children.forEach(item=>{
    //     console.log(t);
    //     item.position.y -= t * 60
    //     if(item.position.y < 0){
    //         item.position.y = 100
    //      }
    // })

    // 周期性改变雨滴位置
    group.children.forEach(item=>{
        //近点的雨滴 雪比较大 可以将相机的近点参数设置到一点
        item.position.y -= 0.1
        item.material.rotation += 0.000001// 雪花旋转需要旋转材质中的rotation
        if(item.position.y < 0){
            item.position.y = 250
        }
    })
    requestAnimationFrame(loop)
}
loop()
function animation(){

    renderer.render(scene,camera)
    requestAnimationFrame(animation)
}
animation()

   let canvasWidth = canvas.clientWidth
   let canvasHeight = canvas.clientHeight
// 用client坐标转换设备坐标
   let cX = ((e.clientX - 8)/canvasWidth) * 2 - 1
   let cY = -((e.clientY-20.8-8)/canvasHeight) * 2 +1
   console.log(cX,cY,'client');
   //全屏
   let cX = (e.clientX/canvasWidth) * 2 - 1
   let cY = -(e.clientY/canvasHeight) * 2 + 1

	const ray = new THREE.Ray()
    ray.origin = new THREE.Vector3(1,0,0)
    // ray.direction = new THREE.Vector3(5,5,5).normalize()
    ray.direction = new THREE.Vector3(5,5,5).normalize();
    //数据归一化 将向量转化为方向向量 向量的长度变为1
    // let L = ray.direction.length() 
    // ray.direction.multiplyScalar(1/L) //multiplyScalar将该方向的三维向量归一化 1除向量的长度得到这个比例，然后xyz三个点都会乘以这个值。
    
//判断射线是否相交某个三角形.intersectTriangle(v1,v2,v3,backfaceCulling:boolean,target) 相交时将值付给target.

	//通过坐标拾取器来获取鼠标交互的模型
	const raycaster = new Raycaster()
    document.body.addEventListener('click',e=>{
        let canvasWidth = canvas.clientWidth
        let canvasHeight = canvas.clientHeight
        //获取canvas画布的宽高 width,height
        let x = (width/e.offsetX) * 2 - 1 
        let y = -(height/e.offsetY)*2 + 1
        let v2 = new three.Vector2(x,y)
        raycaster.setFromCamera(v2,camera) //更新一个起点为相机 方向为v2的射线。
        const arr = rayCaster.intersectObjects([mesh3,mesh1,mesh2])//intersectObjects（）经过其中物体中的哪些呢
        if(arr.length > 0){
            arr[0].object.material.color.set('red')//修改经过模型的颜色
        }
        
         // 如果画布的大小发生了改变那么 我们地重新设置相机的参数 及重新设置渲染器 画布大小 更新摄像机投影矩阵
    document.querySelector('#change').addEventListener('click',()=>{
        vue.flog = !vue.flog
        if(vue.flog){
            vue.dom.style.width = '500px'
            vue.dom.style.height = '500px'
            camera.aspect = canvas.clientWidth/canvas.clientHeight //设置相机宽高比
            renderer.setSize(canvas.clientWidth,canvas.clientHeight)//设置画布大小
            camera.updateProjectionMatrix()//更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
            // if(this.model&&this.model){
            //     console.log('处理');
            //     // this.model.renderer.setSize(500, 500);
            //     this.model.camera.aspect = 500 / 500;
            //     this.model.camera.updateProjectionMatrix()
            // }
        }else{
            vue.dom.style.width = '400px'
            vue.dom.style.height = '400px'
            camera.aspect = canvas.clientWidth/canvas.clientHeight
            renderer.setSize(canvas.clientWidth,canvas.clientHeight)
            camera.updateProjectionMatrix()
            // if(this.model){
            //     console.log('调用');
            //     // this.model.renderer.setSize(400, 400);
            //     this.model.camera.aspect = 400 / 400;
            //     this.model.camera.updateProjectionMatrix()
            // }
        }
    })
           
        
    })

const btn = document.querySelector('.tip2D')
    const btn2 = document.querySelector('.tip3D')

    const btn2D = new CSS2DObject(btn)
    //如果需要将这个标注设置在 一个物体上要么获取物体的世界坐标系 或者将这个标注添加到这个物体里面作为子级。
    let v3 = new THREE.Vector3(50,30,30)
    // 将标注设置为世界坐标系位置
    // boxMesh.getWorldPosition(v3)
    // 将标注设置为定点位置
    console.log( boxPosition.getX(0),'某个位置');
    btn2D.position.copy(v3)
    // scene.add(btn2D)

    const glbLoader = new GLTFLoader()
    let n = 5

    const rayCaster = new Raycaster()
    const renderPass = new RenderPass(scene,camera)
    const composer = new EffectComposer(renderer)
    composer.addPass(renderPass)
    const outLinePass = new OutlinePass(new THREE.Vector2(canvas.clientWidth,canvas.clientHeight),scene,camera)
    //模型描边颜色
    outLinePass.visibleEdgeColor.set(0xffff00)
    //高亮发光描边厚度
    outLinePass.edgeThickness = 4
    //高亮发光区域的强度
    outLinePass.edgeStrength = 6
    composer.addPass(outLinePass)
    glbLoader.load('/零件.glb',gltf=>{
        console.log(gltf,'模型');
        gltf.scene.traverse(val=>{
            if(val.isMesh||val.isLine){
                // val.getWorldPosition(v3)
                n+=30
                if(n==185){
                    camera.position.set(n+10,n+10,n+10)
                    camera.lookAt(n,n,n)
                    controls.target.set(n,n,n)
                    controls.update()
                    console.log('相机的位置',camera);
                }
                val.position.set(n,n,n)
                console.log(val.position,'???');
            }
        })
        // btn.style.top  = '20px'
        // btn.style.left  = '20px'
        const tag2D = new CSS2DObject(btn)
        console.log(tag2D,tag3D,'css对象');
        let changeObj = null
        //添加css2d标签
        document.body.addEventListener('click',e=>{
            let x = (e.offsetX/canvas.clientWidth)*2 - 1
            let y = -(e.offsetY/canvas.clientHeight)*2 + 1
            console.log(x,y);
            let v2 = new THREE.Vector2(x,y)
            
            rayCaster.setFromCamera(v2,camera)
            let obj = rayCaster.intersectObjects(gltf.scene.children[0].children[0].children)
            console.log(obj);
            if(obj.length>0){
                let a = obj[0].object
                outLinePass.selectedObjects = [a]
                changeObj = a
                if(a.isLine) a.add(tag2D)//将标注添加到这个对象里面
            }else{
                // if(changeObj) changeObj.remove(tag)
                // outLinePass.selectedObjects = []
            }

        })
        //因为css2Drender 的事件被屏蔽了所以无法触发事件，我们可以单独给某个元素将事件触发开启
        document.querySelector('.close1').style.pointerEvents = 'auto';
        document.querySelector('.close1').addEventListener('click',()=>{
              if(changeObj) changeObj.remove(tag2D)//关闭弹窗及外边缘发光	
                outLinePass.selectedObjects = []
        })

        scene.add(gltf.scene)
        
    })


    //css3D 渲染器
    const css3DRender = new CSS3DRenderer()
    css3DRender.domElement.style.position = 'absolute'//设置定位是让css3d这个元素与画布重叠
    css3DRender.domElement.style.top = '0px'
    css3DRender.domElement.style.pointerEvents = 'none'
    css3DRender.setSize(canvas.clientWidth,canvas.clientHeight)
    document.querySelector('.screen').appendChild(css3DRender.domElement)
    window.addEventListener('resize',()=>{
        css3DRender.setSize(canvas.clientWidth,canvas.clientHeight)
    })

    //css2D 渲染器
    const css2Drender = new CSS2DRenderer()
    css2Drender.domElement.style.position = 'absolute'//设置定位是让css3d这个元素与画布重叠
    css2Drender.domElement.style.top = '0px'
    css2Drender.domElement.style.pointerEvents = 'none'//关闭渲染的事件 避免相机或者场景无法点击的问题
    css2Drender.setSize(canvas.clientWidth,canvas.clientHeight)
    document.querySelector('.screen').appendChild(css2Drender.domElement)
    window.addEventListener('resize',()=>{
        //场景的大小也需要更新
        css2Drender.setSize(canvas.clientWidth,canvas.clientHeight)
    })


    function animation(){
        css2Drender.render(scene,camera)
        css3DRender.render(scene,camera)
        // renderer.render(scene,camera)
        composer.render()
        requestAnimationFrame(animation)
    }
    animation()

  
const btn2 = document.querySelector('.tip3D')
const glbLoader = new GLTFLoader()
let n = 5
const rayCaster = new Raycaster()
const renderPass = new RenderPass(scene,camera)
const composer = new EffectComposer(renderer)
composer.addPass(renderPass)
const outLinePass = new OutlinePass(new THREE.Vector2(canvas.clientWidth,canvas.clientHeight),scene,camera)
//模型描边颜色
outLinePass.visibleEdgeColor.set(0xffff00)
//高亮发光描边厚度
outLinePass.edgeThickness = 4
//高亮发光区域的强度
outLinePass.edgeStrength = 6
composer.addPass(outLinePass)
glbLoader.load('/零件.glb',gltf=>{
    console.log(gltf,'模型');
    gltf.scene.traverse(val=>{
        if(val.isMesh||val.isLine){
            // val.getWorldPosition(v3)
            n+=30
            if(n==185){
                camera.position.set(n+10,n+10,n+10)
                camera.lookAt(n,n,n)
                controls.target.set(n,n,n)
                controls.update()
                console.log('相机的位置',camera);
            }
            val.position.set(n,n,n)
            console.log(val.position,'???');
        }
    })
    const tag3D = new CSS3DObject(btn2)
    //禁止CSS3DObject标签对应HTMl元素背面显示
    btn2.style.backface-visibility = 'hidden'
    
    const tagSprite = new CSS3DSprite(btn2)
    tag3D.scale.set(0.5,0.5,1);//缩放标签尺寸
    tag3D.position.x += 60
    console.log(tag2D,tag3D,'css对象');
    
    let changeObj = null
    //添加css2d标签
    document.body.addEventListener('click',e=>{
        let x = (e.offsetX/canvas.clientWidth)*2 - 1
        let y = -(e.offsetY/canvas.clientHeight)*2 + 1
        console.log(x,y);
        let v2 = new THREE.Vector2(x,y)
        
        rayCaster.setFromCamera(v2,camera)
        let obj = rayCaster.intersectObjects(gltf.scene.children[0].children[0].children)
        console.log(obj);
        if(obj.length>0){
            let a = obj[0].object
            outLinePass.selectedObjects = [a]
            changeObj = a
            if(a.isLine) a.add(tag2D)
            // if(a.isMesh) a.add(tag3D) //css3D 具有跟着缩放的特点，类似于Mesh ,始终是html创建的元素 旋转场景始终在模型上面。
            if(a.isMesh) a.add(tagSprite) //css3D精灵 类似于精灵图，始终朝着向摄像机。
        }else{
            // if(changeObj) changeObj.remove(tag)
            // outLinePass.selectedObjects = []
        }

    })
    document.querySelector('.close1').style.pointerEvents = 'auto';
    document.querySelector('.close1').addEventListener('click',()=>{
          if(changeObj) changeObj.remove(tag2D)
            outLinePass.selectedObjects = []
    })
    document.querySelector('.close2').style.pointerEvents = 'auto';
    document.querySelector('.close2').addEventListener('click',()=>{
          if(changeObj) changeObj.remove(tagSprite)
            outLinePass.selectedObjects = []
    })



    scene.add(gltf.scene)
    
})


//css3D 渲染器
const css3DRender = new CSS3DRenderer()
css3DRender.domElement.style.position = 'absolute'//设置定位是让css3d这个元素与画布重叠
css3DRender.domElement.style.top = '0px'
css3DRender.domElement.style.pointerEvents = 'none'
css3DRender.setSize(canvas.clientWidth,canvas.clientHeight)
document.querySelector('.screen').appendChild(css3DRender.domElement)
window.addEventListener('resize',()=>{
    css3DRender.setSize(canvas.clientWidth,canvas.clientHeight)
})

//css2D 渲染器
const css2Drender = new CSS2DRenderer()
css2Drender.domElement.style.position = 'absolute'//设置定位是让css3d这个元素与画布重叠
css2Drender.domElement.style.top = '0px'
css2Drender.domElement.style.pointerEvents = 'none'
css2Drender.setSize(canvas.clientWidth,canvas.clientHeight)
document.querySelector('.screen').appendChild(css2Drender.domElement)
window.addEventListener('resize',()=>{
    css2Drender.setSize(canvas.clientWidth,canvas.clientHeight)
})


function animation(){
    css2Drender.render(scene,camera)
    css3DRender.render(scene,camera)
    // renderer.render(scene,camera)
    composer.render()
    requestAnimationFrame(animation)
}
animation()

185.199.108.133 raw.githubusercontent.com

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  // 环境变量
  runtimeConfig: {
    // 服务端的环境变量
    apiSecret: '123',
    // 客户端的环境变量
    public: {
      apiBase: '/api'
    }
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import '@/assets/mixin.scss';`
        }
      }
    }
  },
  // 配置px--》rem 啥的
  postcss: {},
  webpack: {}
})

const runtimeConfig = useRuntimeConfig()

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

const appConfig = useAppConfig()

export default defineNuxtConfig({
    
    vite: {
        css: {
          preprocessorOptions: {
            scss: {
              additionalData: `@import '@/assets/mixin.scss';`
            }
          }
        }
  	}
    
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/style/main.scss'
  ]
})

<template>
  <div>
    <NuxtLayout name="custom">
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </div>
</template>

definePageMeta({
     layout: false
})

// 中间件，类似于koa的中间件，event类似于koa的ctx
export default defineEventHandler((event) => {
    // console.log()
    // console.log('New request: ' + event.node.req.url)
    // 统一设置token
    const app = useRuntimeConfig()
    console.log(event)
    event.context.baseUrl = app['BASE_URL']
})

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
    router,
    store
}).$mount('#app')

/**
 * vue3.2
 * - 函数式编程： （我要一个vue应用，我就调用一个函数，这个函数一执行，就给我返回一个vue应用）
 */

// createApp就是用来创建vue应用的
import { createApp } from 'vue'
// 导入样式
import './style.css'
// 根组件（最顶层的组件）
import App from './App.vue'

// createApp(App).mount('#app')
// 创建app
const app = createApp(App)

// 将vue应用app挂载到#app的节点下
app.mount('#app')

#node没有内置ts 需要下载node的ts配置 不然无法识别path模块
// pnpm i @types/node -D

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

{
  "compilerOptions": {
    //++ 
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  },