首页three.js加载stl模型html代码

three.js加载stl模型html代码

时间: 2023-12-08 13:03:11 浏览: 175

<!DOCTYPE html> <html> <head> <title>three.js STL模型加载示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; overflow: hidden; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/STLLoader.min.js"></script> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建光源 var light = new THREE.AmbientLight(0xffffff); scene.add(light); // 加载stl模型 var loader = new THREE.STLLoader(); loader.load('model.stl', function (geometry) { var material = new THREE.MeshPhongMaterial({ color: 0xAAAAAA, specular: 0x111111, shininess: 200 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); }); // 渲染场景 function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); </script> </body> </html>

阅读全文