three.js学习（三）

dat.gui库

//dat.gui库

import * as THREE from 'three'
//导入轨道控制器（可以使相机围绕目标进行轨道运动）
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//console.log(THREE);
import gsap from 'gsap';
//导入gsap库
import * as dat from 'dat.gui'


// 了解three基本内容
//创建一个场景
const scene = new THREE.Scene();  
//创建相机
//设置相机视锥体
//fov:摄像机视锥体垂直视野角度。aspect:摄像机视锥体长宽比。near:摄像机视锥体近端面。far:摄像机视锥体远端面
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//设置相机对象位置
camera.position.set(0,0,10);
scene.add(camera)

//添加物体
//创建几何体对象
const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
//根据几何体材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

//修改物体的位置
//cube.position.set(5,0,0);
//cube.position.x = 5;

//缩放
//cube.scale.set(3,2,1);

//旋转
cube.rotation.set(Math.PI/4,0,0);

//将几何体添加到场景中
scene.add(cube);

const gui = new dat.GUI();
gui.add(cube.position,"x").min(0).max(5).step(0.1).name("移动x轴").onChange((value)=>{
    console.log(value)
}).onFinishChange((value)=>{
    console.log('完全停下来触发',value)
});
const params = {
    color:"#ffff00",
    fn:()=>{
        //让立方体运动起来
        gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1})
    }
}
gui.addColor(params,'color').onChange((value)=>{
    cube.material.color.set(value);
})
//设置选项框
gui.add(cube,"visible").name('是否显示');
//点击触发某个事件
gui.add(params,'fn').name('立方体运动');

var folder = gui.addFolder("设置立方体");
folder.add(cube.material,"wireframe");
//点击触发某个事件
folder.add(params,'fn').name('立方体运动');





//添加坐标辅助器.红色-x轴；绿色-y轴；蓝色-z轴；
//参数代表轴的线段长度
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);


//使用渲染器，通过相机将场景渲染进来
//renderer.render(scene,camera);

//创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
//设置控制器阻尼，让控制器 更有真实效果,且必须在动画循环里调用update()
controls.enableDamping = true;

//设置时钟
const clock = new THREE.Clock()


window.addEventListener('dblclick',()=>{
    //双击控制暂停
    // if(animate1.isActive()){
    //     animate1.pause();
    // }else{
    //     animate1.resume();
    // }

    //双击控制全屏
    const fullScreenElement = document.fullscreenElement;
    if(!fullScreenElement){
        renderer.domElement.requestFullscreen();
    }else{
        document.exitFullscreen();
    }
    
    
})

//设置渲染函数
function render(){
    
    controls.update();
    renderer.render(scene,camera);
    //下一帧渲染的时候调用render函数
    requestAnimationFrame(render);
}
render();

//监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
    //更新摄像头
    camera.aspect = window.innerWidth/window.innerHeight;
    //更新摄像机的投影矩阵
    camera.updateProjectionMatrix();
    //更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight);
    //设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio);
})

几何体

//添加物体
//创建几何体对象
for(let i=0;i<50;i++){
    const geometry = new THREE.BufferGeometry();
    const positionArr = new Float32Array(9);
    //每个三角形需要三个顶点，每个顶点需要三个值
    for(let j=0;j<9;j++){
        positionArr[j] = Math.random()*5
    }
    geometry.setAttribute('position',new THREE.BufferAttribute(positionArr,3));
    let color = new THREE.Color(Math.random(),Math.random(),Math.random());
    const material = new THREE.MeshBasicMaterial({color:color,transparent:true,opacity:0.5,});
    const mesh = new THREE.Mesh(geometry,material)
    scene.add(mesh)
}

初始材质与纹理

//导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load('./textures/mood.jpeg');
//设置纹理偏移
//doorColorTexture.offset.x = 0.5;
//设置旋转中心
doorColorTexture.center.set(0.5,0.5);
//设置纹理旋转
//doorColorTexture.rotation = Math.PI/4;
//设置纹理的重复
doorColorTexture.repeat.set(2,3);
//设置纹理重复模式
doorColorTexture.wrapS = THREE.RepeatWrapping;
doorColorTexture.wrapT = THREE.MirroredRepeatWrapping;

//纹理显示设置
doorColorTexture.minFilter = THREE.NearestFilter;
doorColorTexture.magFilter = THREE.NearestFilter;

灯光与阴影

//1.材质要满足对光照有反应
//2.设置渲染器开启阴影的计算  renderer.shadowMap.enabled = true
//3.设置光照投射阴影 directionalLight.castShadow = true
//4.设置物体投射阴影  sphere.castShadow = true
//5.设置物体接收阴影  plane.receiveShadow = true
//灯光
//环境光
const light = new THREE.AmbientLight(0xffffff,0.5);
scene.add(light);

//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff,0.5);
directionalLight.position.set(10,10,10);
directionalLight.castShadow = true
//scene.add(directionalLight);


//阴影属性
//设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
//设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(2048,2048);

//设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;

scene.add(directionalLight);

聚光灯

//灯光
//环境光
const light = new THREE.AmbientLight(0xffffff,0.5);
scene.add(light);


const spotLight = new THREE.SpotLight(0xffffff,0.5);
spotLight.position.set(5,5,5);
spotLight.castShadow = true
//scene.add(directionalLight);


//阴影属性
//设置阴影贴图模糊度
spotLight.shadow.radius = 20;
//设置阴影贴图的分辨率
spotLight.shadow.mapSize.set(4096,4096);

spotLight.target = sphere;
spotLight.angle = Math.PI/6;
spotLight.distance = 0;



scene.add(spotLight);

点光源

//灯光
//环境光
const light = new THREE.AmbientLight(0xffffff,0.5);
scene.add(light);


const smallBall = new THREE.Mesh(
    new THREE.SphereBufferGeometry(0.1,20,20),
    new THREE.MeshBasicMaterial({color:0xff0000})
);
smallBall.position.set(2,2,2)


const pointLight = new THREE.PointLight(0xff0000,0.5);
//pointLight.position.set(2,2,2);
pointLight.castShadow = true

//scene.add(directionalLight);


//阴影属性
//设置阴影贴图模糊度
pointLight.shadow.radius = 20;
pointLight.shadow.mapSize.set(512,512);
//设置阴影贴图的分辨率


smallBall.add(pointLight);
scene.add(smallBall);