THREE.JS 导入STL格式的模型

末蓝、 2022-04-14 02:50 667阅读 0赞

### Three.js框架 ###

3D模型渲染

### 引入three.js等js ###

从github上下载：[https://github.com/mrdoob/three.js][https_github.com_mrdoob_three.js]

### 教程 ###

[THREE.JS 导入STL格式的模型][THREE.JS _STL]  
[THREE.JS的网格对象MESH的属性和方法][THREE.JS_MESH]

### 简单DEMO ###

<html>
    	<div style="width: 600px;height: 400px;" id="modelViewDiv">
                    
        </div>
    
    <script th:src="@{/static/js/jquery/dist/jquery.min.js}"></script>
    
    <script th:src="@{/static/three/three.js}"></script>
    <script th:src="@{/static/three/OrbitControls.js}"></script>
    <script th:src="@{/static/three/STLLoader.js}"></script>
    <script th:src="@{/static/three/dat.gui.min.js}"></script>
    <script th:src="@{/static/three/stats.min.js}"></script>
    <script> //渲染器构建 var renderer; function initRender() { renderer = new THREE.WebGLRenderer({ antialias:true}); renderer.setSize(600, 400); //告诉渲染器需要阴影效果 renderer.setClearColor(0xEEEEEE); document.getElementById("modelViewDiv").appendChild(renderer.domElement); } //相机构建 var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, 600/400, 0.1, 1000); camera.position.set(0, 40, 50); camera.lookAt(new THREE.Vector3(0,0,0)); } //场景构建 var scene; function initScene() { scene = new THREE.Scene(); } //初始化dat.GUI简化试验流程 var gui; function initGui() { //声明一个保存需求修改的相关数据的对象 gui = { }; var datGui = new dat.GUI(); //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） } //灯光 var light; function initLight() { // scene.add(new THREE.AmbientLight(0x444444)); light = new THREE.HemisphereLight(0x404040 ,0xffffff, 0.8); // light = new THREE.PointLight(0xffffff); //点光 // light.position.set(0,50,50); light.position.set(0,1,0); //告诉平行光需要开启阴影投射 // light.castShadow = true; scene.add(light); } function initModel() { //辅助工具 // var helper = new THREE.AxesHelper(50); // scene.add(helper); var loader = new THREE.STLLoader(); loader.load("/cms/static/three/sowger.stl", function (geometry) { //创建纹理 var mat = new THREE.MeshLambertMaterial({ color: 0x00ffff}); var mesh = new THREE.Mesh(geometry, mat); mesh.rotation.x = -0.5 * Math.PI; //将模型摆正 mesh.scale.set(4, 4, 4); //缩放 geometry.center(); //居中显示 scene.add(mesh); }); } //初始化性能插件 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 var controls; function initControls() { controls = new THREE.OrbitControls( camera, renderer.domElement ); // 如果使用animate方法时，将此函数删除 //controls.addEventListener( 'change', render ); // 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度 //controls.dampingFactor = 0.25; //是否可以缩放 controls.enableZoom = true; //是否自动旋转 controls.autoRotate = true; controls.autoRotateSpeed = 0.5; //设置相机距离原点的最远距离 controls.minDistance = 1; //设置相机距离原点的最远距离 controls.maxDistance = 200; //是否开启右键拖拽 controls.enablePan = true; } function render() { renderer.render( scene, camera ); } //窗口变动触发的函数 function onWindowResize() { camera.aspect = 600 / 400; camera.updateProjectionMatrix(); render(); renderer.setSize( 600, 400 ); } function animate() { //更新控制器 render(); //更新性能插件 // stats.update(); controls.update(); requestAnimationFrame(animate); } function draw() { // initGui(); initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); // initStats(); animate(); window.onresize = onWindowResize; } // 开始渲染 draw(); </script>
    </html>

[https_github.com_mrdoob_three.js]: https://github.com/mrdoob/three.js
[THREE.JS _STL]: https://www.wjceo.com/blog/threejs/2018-03-20/130.html
[THREE.JS_MESH]: https://www.wjceo.com/blog/threejs/2018-02-12/24.html