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)