参考官网环境配置安装相关依赖后，搭建一个场景展示模型的基本流程。
- 创建Three.js场景
const scene = new THREE.Scene();
- 加载GLB文件
Three.js提供了加载GLB文件的工具，GLTFLoader、DRACOLoader 需搭配使用
const loader = new THREE.GLTFLoader();
const dracoLoader = new DRACOLoader();
const draco_path = '/draco/';
dracoLoader.setDecoderPath(draco_path);
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load('path/to/model.glb', (gltf) => {
scene.add(gltf.scene);
});
- 创建设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
- 设置渲染器
渲染器负责将3D场景渲染到网页上。
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
- 调整照明
为了让3D模型看起来更加逼真。
环境光在Three.js场景中扮演着基础光源的角色，会均匀地照亮场景中的所有物体，且没有特定的方向，也不会产生阴影。
方向光可以模拟来自无限远的平行光线，类似于太阳光。方向光非常适合用于模拟日光或其他远距离光源的效果。例如，它可以用于增强场景的逼真度和立体感，为物体提供明暗效果。
//环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
//方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
- 添加交互功能
通过鼠标或键盘来控制3D场景。
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enablePan = true;
- 动画循环
定时更新场景让动画更加流畅的并且没有顿感的渲染在网页上。
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update()
}
animate();
over
