一:简述
在一个单html页面展示一个旋转的立方体三维结构,页面左上角Stats性能监视器监测旋转动画刷新帧率。
二:源码展示
index.html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单立方体</title>
<style>
body{
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<!-- type="importmap"功能:.html文件中也能和nodejs开发环境中一样方式,引入npm安装的js库 -->
<script type="importmap">
{
"imports" : {
"three" : "../three.js/build/three.module.js",
"three/addons/" : "../three.js/examples/jsm/"
}
}
</script>
<script src="./index.js" type="module"></script>
</body>
</html>
index.js
import * as THREE from "three"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
//引入性能监视器stats.js,显示帧率
import Stats from 'three/addons/libs/stats.module.js';
//创建stats对象
const stats = new Stats();
//Stats.domElement:web页面上输出计算结果,一个div元素
document.body.appendChild(stats.domElement);
//创建场景
const scene = new THREE.Scene();
// 创建网格模型对象
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 漫反射网格材质;MeshLambertMaterial
const material = new THREE.MeshLambertMaterial({
color: 0x00ffff, //设置材质颜色
transparent: true, //开启透明
opacity: 0.5, //设置透明度
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
//添加辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);
//添加光源
const ambient = new THREE.AmbientLight(0xffffff,0.4);//环境光
scene.add(ambient);
const directionalLight = new THREE.DirectionalLight(0xffffff,0.8);//平行光
directionalLight.position.set(100,200,150);
scene.add(directionalLight);
//创建相机
const height = window.innerHeight;//相机切面 高
const width = window.innerWidth;//宽
const camera = new THREE.PerspectiveCamera(30, width / height, 1 , 3000);//透明相机 模拟人眼或相机 一个四棱的视椎体 椎体内的物体为可渲染展示的内容 (切面角度,宽高比,近端视角切面距离,远端视角切面距离)
camera.position.set(150,250,250);//相机在场景的位置
camera.lookAt(0,0,0);//相机在场景中朝向的坐标位置
//创建渲染器 相当于照片
const renderer = new THREE.WebGLRenderer({
antialias:true,//抗锯齿
});
//渲染画布的宽与高
renderer.setSize(width,height);
//渲染3d场景图
renderer.render(scene,camera);
//存入网页节点
document.body.appendChild(renderer.domElement);
//渲染器编译方式
renderer.outputEncoding = THREE.sRGBEncoding;
//相机轨道控制器 添加后可以移动相机视角
const controls = new OrbitControls(camera,renderer.domElement);
//渲染循环
function render(){
stats.update();//刷新帧率展示
renderer.render(scene,camera);//重新渲染
mesh.rotateY(0.01);//绕y轴旋转
requestAnimationFrame(render);//反复执行
}
//启动渲染循环
render();
//监控窗口变化 重新设定视角长宽比及渲染画布长宽比 避免场景变形
window.onresize = () => {
renderer.setSize(window.innerWidth , window.innerHeight);//重新渲染画布大小
camera.aspect = window.innerWidth / window.innerHeight; //重设相机长宽比
camera.updateProjectionMatrix();//更新相机属性
}