3D数字孪生 - Three.js 项目介绍与基础环境搭建
warning:
这篇文章距离上次修改已过200天,其中的内容可能已经有所变动。
// 引入必要的Three.js组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载模型
const loader = new GLTFLoader();
loader.load('models/scene.gltf', function (gltf) {
scene.add(gltf.scene);
}, undefined, function (error) {
console.error(error);
});
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
这段代码演示了如何使用Three.js创建一个基本的3D场景,加载一个模型,并使用OrbitControls来允许用户绕模型查看不同的视角。代码简洁,注重核心功能的实现,并提供了一个基本的3D环境的搭建示例。
评论已关闭