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

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

一、参考3D模形效果

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

效果：

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

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

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

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

登录后复制

plain 复制代码

<!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/[email protected]/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>

三、调试运行

将给出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模形

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

五、验证新的3D模形

成功加载

完整源码
登录后复制

plain 复制代码

<!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/[email protected]/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>

总结

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