Three.js学习笔记1

// 导入thress.js文件
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();

// 创建透视投影相机
/**
 *  视角：相机能看的范围，是一个视锥体
    宽高比：窗口宽高比
    近平面：0.1 相机最近能看到物体
    远平面：1000 相机最近能看到物体
 */
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// 创建网格
const cube = new THREE.Mesh(geometry, material);
const parentCub = new THREE.Mesh(geometry, parentMaterial);
parentCub.add(cube);
// 加入场景
scene.add(parentCub);

// 设置物体位置
// position是相对于父元素进行定位的，在没有父元素时相对于世界坐标经行定位

// 分别设置
// cube.position.x = 0;
// cube.position.y = 0;
// cube.position.z = 0;
// // set方法设置
// cube.position.set(0, 0, 0);

cube.position.set(-3, 0, 0);
parentCub.position.set(3, 0, 0);

// 物体的局部缩放,相对于父元素
// 子元素放大 = 父元素放大倍数 * 子元素放大倍数
parentCub.scale.set(2, 2, 2);
cube.scale.set(2, 2, 2);

// 物体的局部旋转,会叠加父元素的旋转
parentCub.rotation.x = Math.PI/4;
cube.rotation.x = Math.PI/4;



// 设置相机位置
camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 5;
// 设置相机视角，默认为原点
camera.lookAt(0,0,0)

// 添加世界坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.25;
// 设置自动旋转
controls.autoRotate = true;
// 设置自动旋转速度
controls.autoRotateSpeed = 4;

// 渲染函数
function animate() {
    controls.update();
    // 每一帧渲染
    requestAnimationFrame(animate);
    // 旋转
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    // 渲染
    renderer.render(scene, camera);
}

// 启动动画
animate();

// 监听窗口的变化
window.addEventListener('resize', () => {
    // 重置渲染器宽高
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 更新相机的宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 重新计算相机的投影矩阵
    camera.updateProjectionMatrix();
})

// 全屏按钮
let btn = document.createElement('button');
btn.innerHTML = "点击全屏";
btn.style.position = "absolute";
btn.style.top = "10px";
btn.style.left = "10px";
btn.onclick = function() {
    document.body.requestFullscreen();
}
document.body.appendChild(btn);

// 退出全屏
let exitBtn = document.createElement('button');
exitBtn.innerHTML = "退出全屏";
exitBtn.style.position = "absolute";
exitBtn.style.top = "10px";
exitBtn.style.left = "100px";
exitBtn.style.zIndex = 1000;
exitBtn.onclick = function() {
    document.exitFullscreen();
}
document.body.appendChild(exitBtn);