Three.js基础光源、摄像机等快速入门（附VR看车代码）

本文链接：https://blog.csdn.net/Ian1025/article/details/141028343

场景（Scene）：场景是 Three.js 中所有对象的容器，包括灯光、相机和几何体等。
相机（Camera）：Three.js 提供了几种类型的相机，包括透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。相机决定了观察场景的视角。
几何体（Geometry）：几何体定义了 3D 对象的形状，可以是简单的形状如立方体、球体或更复杂的自定义形状。
网格（Mesh）：网格是几何体和材质的组合，用于在场景中显示 3D 对象。
材质（Material）：材质定义了网格的外观，可以是基本的材质如基本材质（MeshBasicMaterial）或更高级的材质如着色器材质（ShaderMaterial）。
灯光（Light）：Three.js 支持多种类型的灯光，包括环境光（AmbientLight）、点光源（PointLight）、聚光灯（SpotLight）和定向光（DirectionalLight）。
渲染器（Renderer）：Three.js 使用 WebGLRenderer 来渲染场景。渲染器负责将场景中的所有对象转换为浏览器可以理解的格式。
动画（Animation）：Three.js 允许你通过 JavaScript 来控制对象的位置、旋转和缩放，从而创建动画效果。
纹理（Texture）：纹理可以应用于材质上，给 3D 对象添加更丰富的视觉效果。
控制（Controls）：Three.js 提供了多种控制类，如 OrbitControls，允许用户通过鼠标或触摸操作来浏览场景。
物理引擎（Physics）：虽然 Three.js 本身不包含物理引擎，但可以与像 Cannon.js 或 Ammo.js 这样的物理引擎库结合使用，来模拟真实世界的物理效果。
扩展和插件：Three.js 有一个活跃的社区，提供了许多扩展和插件，用于添加额外的功能，如粒子系统、动画库等。

import * as Three from 'three';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
import './main.css';
let scene,camera,render,cube,geometry,material,controls;
// 创建射线
const raycaster = new Three.Raycaster();
// 创建二维平面
const pointer = new Three.Vector2();
// 鼠标移动
function onPointerMove(event){
    pointer.x = (event.clientX/window.innerWidth)*2-1;
    pointer.y = -(event.clientY/window.innerHeight)*2+1;
    raycaster.setFromCamera(pointer,camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if(intersects.length>0){
        intersects[0].object.material.color.set(0xff0000);
    }
}
window.addEventListener("pointermove",onPointerMove);// 鼠标移动事件
// 点击屏幕时判断是否光线命中物体 点击几何体使其旋转
window.addEventListener("click",function(){
    const intersects = raycaster.intersectObjects([cube]);
    if(intersects.length>0){
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        cube.rotation.z += 0.1;
    }
})
// 初始化渲染器
function initRenderer(){
    render = new Three.WebGLRenderer();
    render.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(render.domElement);
}
// 初始化场景
function initScene(){
    scene = new Three.Scene();
    // 设置背景色
    render.setClearColor("#ccc");
    // 设置坐标轴
    const axesHelper = new Three.AxesHelper(100);
    scene.add(axesHelper);
    // 添加光源 平行光
    const directionalLight = new Three.DirectionalLight("lightblue");
    // 设置光源位置
    directionalLight.position.set(0,30,0);
    scene.add(directionalLight);
    // 添加光源 环境光
    // const ambientLight =