网站维护模板,免费网站空间怎么做网站,wordpress去除index.php,上海网站设计培训班由于工作原因#xff0c;近一年没怎么写代码#xff0c;有朋友问你做过3D模型展示吗#xff0c;之前都是做以vue为框架做定制业务#xff0c;这次抽时间试试3d模型展示。 软件功能
使用ThreeJS框架实现加载GLB模型#xff0c;并添加动画效果#xff0c;实现3d展示模型。… 由于工作原因近一年没怎么写代码有朋友问你做过3D模型展示吗之前都是做以vue为框架做定制业务这次抽时间试试3d模型展示。 软件功能
使用ThreeJS框架实现加载GLB模型并添加动画效果实现3d展示模型。使用GLTFLoader加载模型并使用OrbitControls实现鼠标拖拽旋转滚轮缩放点击模型显示信息等功能。参考代码
软件架构
工程化
使用webpack做工程化安装webpack webpack-cli webpack-dev-server html-webpack-plugin babel/core babel/preset-env babel-loader
编写webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/app.js, // 入口文件路径output: {filename: bundle.js, // 输出文件名path: path.resolve(__dirname, dist), // 输出目录clean: true, // 自动清理输出目录},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,},},{test: /\.(glb|gltf)$/,type: asset/resource, // 确保可以加载GLB等资源文件},],},plugins: [new HtmlWebpackPlugin({template: ./src/index.html, // 模板文件路径filename: index.html, // 输出的 HTML 文件名}),],resolve: {extensions: [.js, .json], // 解析模块时尝试这些扩展名alias: {three: path.resolve(__dirname, node_modules/three), // 如果需要可以指定Three.js的位置},},devServer: {static: {directory: path.join(__dirname, assets), // 静态文件夹},open: true, // 启动时打开浏览器hot: true, // 热更新},mode: development, // 开发模式
};主程序代码
import * as THREE from three;
import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js;
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;// 创建场景、相机、渲染器等...
console.log(THREE version:, THREE.REVISION);// 创建场景
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);// 设置场景背景色
scene.background new THREE.Color(0xcccccc);// 添加环境灯光
const ambientLight new THREE.AmbientLight(0x404040, 0.2);
scene.add(ambientLight);// 场景中增加四个点光源
const pointLight1 new THREE.PointLight(0xffffff, 0.3, 100);
pointLight1.position.set(5, 5, 5);
scene.add(pointLight1);const pointLight2 new THREE.PointLight(0xffffff, 0.3, 100);
pointLight2.position.set(-5, -5, -5);
scene.add(pointLight2);const pointLight3 new THREE.PointLight(0xffffff, 0.3, 100);
pointLight3.position.set(-5, 5, 5);
scene.add(pointLight3);const pointLight4 new THREE.PointLight(0xffffff, 0.3, 100);
pointLight4.position.set(5, -5, -5);
scene.add(pointLight4);// 场景中增加四个平行光
const light1 new THREE.DirectionalLight(0x001dff, 1);
light1.position.set(5, 5, 5).normalize();
scene.add(light1);
const light2 new THREE.DirectionalLight(0xffe8e8, 1);
light2.position.set(5, -5, 5).normalize();
scene.add(light2);
const light3 new THREE.DirectionalLight(0xfff8ef, 1);
light3.position.set(-5, 5, 5).normalize();
scene.add(light3);
const light4 new THREE.DirectionalLight(0xffffff, 1);
light4.position.set(5, 5, -5).normalize();
scene.add(light4);// 添加坐标轴辅助器
// const axesHelper new THREE.AxesHelper(2)
// scene.add(axesHelper)let model; // 用于存储加载的模型
// 加载GLB模型
const loader new GLTFLoader();
loader.load(test2.glb, // 确保路径正确function (gltf) {model gltf.scene; // 将加载的模型赋值给变量scene.add(gltf.scene);// 将模型的中心点设置为控制器中心点const box new THREE.Box3().setFromObject(model);if (box ! null) {const center new THREE.Vector3();box.getCenter(center);// 将 OrbitControls 的 target 设置为模型的中心controls.target.copy(center);}// 如果需要立即生效可以调用 update 方法controls.update();},undefined,function (error) {console.error(error);}
);// 创建 OrbitControls 实例控制场景中的模型
const controls new OrbitControls(camera, renderer.domElement);
controls.enableDamping true;
controls.dampingFactor 0.25;
controls.enableZoom true;controls.autoRotate true
controls.autoRotateSpeed 3
controls.target new THREE.Vector3(0, 0, 0)// 调整相机位置以适应模型
camera.position.z 2;// let time 0;
function animate() {requestAnimationFrame(animate);if (model) {// 更新时间变量// time 0.01;// 让模型旋转// model.rotation.x 0.01;// model.rotation.y 0.01;// 让模型上下浮动// model.position.y Math.sin(time) * 0.2;}renderer.render(scene, camera);controls.update()
}animate();// 监听窗口大小变化
window.addEventListener(resize, () {camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);
});
