画一个平面的太极图是很容易，要实现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>总结
学习也是需要多想想方法的