注意:
TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径
比如:
直接代码咯
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - 3DS loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="/three.js/main.css"> </head> <body> <div id="info"> <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader </div> <script type="module"> //注意: //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径 import * as THREE from '/three.js/build/three.module.js'; import { TrackballControls } from '/three.js/jsm/controls/TrackballControls.js'; import { STLLoader } from '/three.js/jsm/loaders/STLLoader.js'; var container, controls; var camera, scene, renderer; init(); animate(); function resize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { controls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10); camera.position.z = 2; scene = new THREE.Scene(); scene.add(new THREE.HemisphereLight()); var directionalLight = new THREE.DirectionalLight(0xffeedd); directionalLight.position.set(0, 0, 2); scene.add(directionalLight); // ASCII file var loader = new STLLoader(); loader.load('/model1/面.stl', function (geometry) { var mat = new THREE.MeshLambertMaterial({ color: 'red' });//{ color: 0x00ffff } var mesh = new THREE.Mesh(geometry, mat); mesh.rotation.x = -0.5 * Math.PI; //将模型摆正 mesh.scale.set(0.1, 0.1, 0.1); //缩放 geometry.center(); //居中显示 scene.add(mesh); }); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); controls = new TrackballControls(camera, renderer.domElement); window.addEventListener('resize', resize, false); } </script> </body> </html>