灯光阴影条件

阴影贴图设置

阴影范围

实例代码1:加载环境纹理

水面制作:

//导入水
import {Water} from "three/examples/jsm/objects/Water2"

//加载模型
gltfLoader.load("./model/scene.glb",(gltf)=>{
const model=gltf.scene;
  model.traverse((child)=>{
    //找到水的模型Plane,并隐藏
    if(child.name==="Plane"){
    	child.visible=false;
    }
  })
  scene.add(model)
})
//
//

点光源:

1. 允许有阴影:renderer.shadowMap.enabled=true
2. 添加光源

const pointLight=new THREE.PointLight(0xffffff,10);
pointLight.postion.set(0.5,2.3,0)
pointLight.castShadow=true //允许有阴影
scene.add(pointLight)

3. 遍历所有模型里的元素,允许有阴影

//加载模型
gltfLoader.load("./model/scene.glb",(gltf)=>{
const model=gltf.scene;
  model.traverse((child)=>{
    //找到水的模型Plane,并隐藏
    if(child.name==="Plane"){
    	child.visible=false;
    }
    if(child.isMesh){
    	child.castShadow=true; //允许有阴影
      child.receiveShadow=true;//允许有投射阴影
    }
  })
  scene.add(model)
})

4. 光不是实质物体,所以要创建物体和它绑在一起.

5. 让光源围绕移动,注:gsap介绍:https://blog.csdn.net/qq_53123067/article/details/130395410

相机的切换:

创建漫天星

爱心路径

起始vue3项目

1. vue create app ->自定义->什么不选就babel->cd app -> yarn add three gsap
2. app.vue

镜面反射

vr 360 看房

水晶材质怎么做?

视频也可以做背景