画一个平面的太极图是很容易，要实现3D的应该会很难

用DeepSeek来帮助学习three.js加载3D太极模形_3D太极模形

一、参考3D模形效果

       看某网页看到一个效果，像一个3D太极球，觉得挺有趣，挺解压的，想进一步去了解下这是如何实现

效果：

用DeepSeek来帮助学习three.js加载3D太极模形_3D太极模形_02

 链接地址： http://www.webgl3d.cn/3D/banner3/index.html

因为了解过three.js，但没有很深入，一开始固执的认为这个效果是通过three.js设置顶点这类模式来实现，在这个网页上打开浏览器调试”开发者工具“，没有见到glb等模形的链接地址,只看到一些图片，更加的认为是通过顶点来创建的了，通过一些测试，最终确定这是一个模型，是通过three.js加载了一个改了后缀名的模型来实现，这里作者巧妙的通过将glb模形伪装为图片来骗人了

用DeepSeek来帮助学习three.js加载3D太极模形_DeepSeek_03

二、向DeepSeek提问题：请用three.js加载一个模形

因为是模形，这里通过向DeepSeek提问题：请用three.js加载一个模形

用DeepSeek来帮助学习three.js加载3D太极模形_3D太极模形_04

<!DOCTYPE html>
<html>
<head><title>Three.js 模型加载示例</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script><script>// 基础场景设置const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);document.body.appendChild(renderer.domElement);// 添加光源const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);directionalLight.position.set(0, 1, 0);scene.add(directionalLight);// 模型加载const loader = new THREE.GLTFLoader();let model;loader.load('models/your-model.gltf', // 模型路径(gltf) => {model = gltf.scene;scene.add(model);// 调整模型位置和缩放model.position.set(0, 0, 0);model.scale.set(1, 1, 1);},(xhr) => {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},(error) => {console.error('Error loading model:', error);});// 相机位置camera.position.z = 5;// 动画循环function animate() {requestAnimationFrame(animate);if (model) {model.rotation.y += 0.01;}renderer.render(scene, camera);}animate();// 窗口尺寸自适应window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});</script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.

用DeepSeek来帮助学习three.js加载3D太极模形_DeepSeek_05

用DeepSeek来帮助学习three.js加载3D太极模形_DeepSeek_06

三、调试运行

将给出html适当修改，加载fang.jpg

将fang.jpg下载下来，将 'models/your-model.gltf'修改为'models/fang.jpg',这里一开始认为这应该就能显示了吧，测试后发现无法显示，难道这个fang.jpg真不是一个3D模形

四、转换模形格式

以前的网上找到到一个可能免费在线编辑3D模形的网站 https://bj.glbxz.com/，打开网站，通过菜单“文件”->”导入“，选择fang.jpg，发现一片空白，无法显示，这真的不是3D模形？

这里根据经验，将fang.jpg改一下后缀名，改为fang.glb,再次使用导入，成功了，哈哈，还真的是一个3D模形

用DeepSeek来帮助学习three.js加载3D太极模形_DeepSeek_07

使用“导出GLB”功能将其导出为一个新的fang2.glb

五、验证新的3D模形

成功加载

用DeepSeek来帮助学习three.js加载3D太极模形_3D_08

完整源码

<!DOCTYPE html>
<html>
<head><title>Three.js 模型加载示例</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script><script>// 基础场景设置const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);document.body.appendChild(renderer.domElement);// 添加光源const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);scene.add(ambientLight);const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);directionalLight.position.set(0, 1, 0);scene.add(directionalLight);// 模型加载const loader = new THREE.GLTFLoader();let model;loader.load('models/fang2.glb', // 模型路径(gltf) => {model = gltf.scene;scene.add(model);// 调整模型位置和缩放model.position.set(0, 0, 0);model.scale.set(1, 1, 1);},(xhr) => {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},(error) => {console.error('Error loading model:', error);});// 相机位置//camera.position.z = 5;camera.position.z = 10;		// 动画循环function animate() {requestAnimationFrame(animate);            if (model) {model.rotation.y += 0.01;				 }renderer.render(scene, camera);}animate();// 窗口尺寸自适应window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);});</script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.

总结

学习也是需要多想想方法的