要在 JavaScript 中实现 3D 模型,你可以使用 WebGL 技术或者利用已有的 3D 库。下面是一个使用 Three.js 库创建简单 3D 模型的示例:
首先,你需要引入 Three.js 库。你可以从官方网站(https://threejs.org/)下载 Three.js 库文件,并将其引入到你的 HTML 文件中,或者使用 CDN 引入。
<!DOCTYPE html> <html> <head> <title>3D 模型</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.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(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建几何体和材质 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 设置相机位置 camera.position.z = 5; // 渲染循环 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html>