tips: 运行前请准备好对应的3D模型及Three.js三方库依赖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="module">
// 注意依赖引入路径,根据自己目录调整
import THREE from "THREE/build/three.min.js";
import { GLTFLoader } from "THREE/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "THREE/examples/jsm/controls/OrbitControls.js";
class Car {
scene;
renderer;
innerwidth = innerWidth;
innerHeight = innerHeight;
constructor() {
this.init();
}
async init() {
// 加载gltf3D汽车模型配置文件, 3D模型文件可以在https://sketchfab.com/search?q=model+3&sort_by=-relevance&type=models上下载
const gltf = await this.load3DModel("./models/bentley/scene.gltf");
// 创建3D试图场景
this.createScene();
// 设置场景环境光
this.setSceneEnvironment();
// 创建3D虚拟摄像机
this.createCamera();
// 将gltf文件的配置添加至主场景中
this.scene.add(gltf.scene);
// 渲染试图
this.loop();
}
createScene() {
this.box = document.getElementById("box");
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer();
// 设置渲染边界
this.renderer.setSize(this.innerwidth, this.innerHeight);
// 设置场景背景色
this.scene.background = new THREE.Color(0xeeeeee);
// 插入dom节点
this.box.appendChild(this.renderer.domElement);
}
setSceneEnvironment(){
// 创建一个新的scence对象,用于设置主场景的environment
const scene = new THREE.Scene();
// 设置从某个点想四周发射的光源,用于照亮模型
scene.add(new THREE.PointLight());
// 创建网格层,指定初始照亮的物体面
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(),
new THREE.MeshStandardMaterial({ side: THREE.BackSide })
);
scene.add(mesh);
const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
this.scene.environment = pmremGenerator.fromScene(scene).texture;
}
createCamera() {
this.camera = new THREE.PerspectiveCamera(
80,
window.innerWidth / window.innerHeight,
1,
10000
);
this.camera.position.set(400, 200, 100);
this.controls = new OrbitControls(this.camera, this.box);
}
load3DModel(url) {
const loader = new GLTFLoader();
return new Promise((resolve, reject) => {
loader.load(url, (gltf) => {
resolve(gltf);
});
});
}
loop() {
requestAnimationFrame(() => this.loop());
this.renderer.render(this.scene, this.camera);
}
}
new Car();
</script>
</body>
</html>