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)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战