首页three.js加载stl机械臂模型并关联六个轴html代码

three.js加载stl机械臂模型并关联六个轴html代码

时间: 2023-12-30 17:05:45 浏览: 205

<!DOCTYPE html> <html> <head> <title>STL Model Loading with Three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script> </head> <body> <div id="container"></div> <script> var container, camera, scene, renderer, controls; init(); animate(); function init() { container = document.getElementById( 'container' ); // Camera camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set( 0, 0, 10 ); // Scene scene = new THREE.Scene(); // Light var light = new THREE.PointLight( 0xffffff ); light.position.set( 10, 10, 10 ); scene.add( light ); // STL Loader var loader = new THREE.STLLoader(); loader.load( 'models/mechanical_arm.stl', function ( geometry ) { var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); }); // Renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); // Controls controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.screenSpacePanning = false; controls.minDistance = 0.1; controls.maxDistance = 100; // Axes var axesHelper = new THREE.AxesHelper( 5 ); scene.add( axesHelper ); } function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); controls.update(); } </script> </body> </html>

阅读全文