three.js基础用法

import * as THREE from '../libs/build/three.module.js';
import { OrbitControls } from '../libs/jsm/controls/OrbitControls.js'
import { CSS2DRenderer, CSS2DObject } from '../libs/jsm/renderers/CSS2DRenderer.js'

// 变量声明
let scene,camera,renderer,controls,load

// 场景实例化
scene=new THREE.Scene()

// 相机实例化

camera=new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)

// 相机位置

camera.position.set(20,20,20)
// 相机宽高比例
camera.aspect = window.innerWidth / window.innerHeight;
// 更新相机投影

camera.updateProjectionMatrix();

// 相机加入场景
scene.add(camera);

// 渲染器
renderer=new THREE.WebGLRenderer({
// 设置抗锯齿
antialias: true,
// 对数深度缓冲区
logarithmicDepthBuffer: true,

})
// 渲染器宽高
renderer.setSize(window.innerWidth , window.innerHeight)
// 渲染器颜色
　renderer.setClearColor(0xeeeeee,1.0);

// 根据视口调整大小
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});

// 渲染器加入页面

document.body.append(renderer.domElement)

// 控制器实例化
controls=new OrbitControls(camera,renderer.domElement)

// 渲染函数

function render(params) {

renderer.render(scene,camera)

// 引擎自动更新渲染器

requestAnimationFrame(render);
}

// 创建点光源

const dirLight = new THREE.SpotLight(0xffffff);
dirLight.position.set(0, 2, 10);
dirLight.intensity = 5;
dirLight.castShadow = true;
scene.add(dirLight)
// 创建环境光

  const aLight = new THREE.AmbientLight(0xffffff)
		aLight.intensity = 3
		scene.add(aLight)

render()

// 生成一个路面

load=new THREE.BoxGeometry( 20, 40, 0.8 );
const loadmaterial = new THREE.MeshBasicMaterial( {color: 0x999999} );

const loadMain = new THREE.Mesh(load, loadmaterial);
loadMain.rotation.x = -Math.PI / 2;

loadMain. receiveShadow = true;

scene.add(loadMain)