初识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)