当前位置:   article > 正文

django框架下网页用three.js在网页显示stl模型_django three.js

django three.js

前言

记录一下自己在django框架下实现网页端显示3d模型的过程

three.js下载部署

three.js官网链接: link
在这里插入图片描述
直接点击Code那里的download即可下载,然后解压缩three.js-master.zip文件夹

这里如果想要直接运行three.js的例子,需要部署node.js环境
笔者是参考这篇文章部署: link
如果不安装node.js直接进行后面django的部署是否会有问题,暂未验证

打开控制台,cd到three.js-master文件夹,运行npm install
如果成功,该目录下会创建一个node_modules文件夹
接着打开package.json文件,可以看到很多运行指令
这里在控制台输入npm run dev
在这里插入图片描述
Ctrl + 单击打开任意链接,打开后点击example文件夹,即可看到自带的各种例子
后续笔者显示stl文件重点参考了 load/gltf/sheel、load/stl、和lights/spotlight
在这里插入图片描述

创建自己html文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - GLTFloader + Sheen</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background: #bbbbbb;
			}
		</style>
	</head>

	<body>
	
		<script type="importmap">
			{
				"imports": {
					"three": "./build/three.module.js",
					"three/addons/": "./examples/jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			import { STLLoader } from 'three/addons/loaders/STLLoader.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			let camera, scene, renderer, controls;

			init();
			animate();

			function init() {

				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
				camera.position.set( - 2,2,3 );
				//cameraTarget = new THREE.Vector3( 3, 3, 3);
				
				//camera.position.set( -0.25,0.25, -0.5 );
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x808080);
				//scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
				addShadowedLight( 1, 0.5, 1, 0xffffff, 10 );
				addShadowedLight( -1, -0.5, - 1, 0xffffff, 10 );
	
				// model

				const loader = new STLLoader();
				const material = new THREE.MeshPhongMaterial( { color: 0x000080,specular:0x000080,shininess:100} );
				loader.load('../../model.stl', function (geometry) {
				const mesh = new THREE.Mesh( geometry, material );

				mesh.position.set( 0, 0, 0 );
				//mesh.rotation.set( - Math.PI / 2, 0.3, 0 );
				mesh.scale.set( 0.01, 0.01, 0.01 );
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add( mesh );

				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 1;
				renderer.outputEncoding = THREE.sRGBEncoding;
				container.appendChild( renderer.domElement );

				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator( renderer );

				//scene.background = new THREE.Color( 0xbbbbbb );
				scene.environment = pmremGenerator.fromScene( environment ).texture;

				controls = new OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;
				controls.minDistance = 0.1;
				controls.maxDistance = 10;
				controls.target.set( 0, 0.35, 0 );
				controls.update();

				window.addEventListener( 'resize', onWindowResize );

				//GUI
				const gui = new GUI();
				const params = {
					color: material.color.getHex(),
				};
				gui.addColor( params, 'color' ).onChange( function ( val ) {
					material.color.setHex( val );
				} );

			}

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				controls.update(); // required if damping enabled

				render();

			}

			function render() {

				renderer.render( scene, camera );
				//camera.lookAt( cameraTarget );

			}

			function addShadowedLight( x, y, z, color, intensity ) {

				const directionalLight = new THREE.DirectionalLight( color, intensity );
				directionalLight.position.set( x, y, z );
				scene.add( directionalLight );
				directionalLight.castShadow = true;
				const d = 1;
				directionalLight.shadow.camera.left = - d;
				directionalLight.shadow.camera.right = d;
				directionalLight.shadow.camera.top = d;
				directionalLight.shadow.camera.bottom = - d;
				directionalLight.shadow.camera.near = 1;
				directionalLight.shadow.camera.far = 4;
				directionalLight.shadow.bias = - 0.002;
				
			}
		</script>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148

笔者将这个html文件夹放到three.js和package.json同一级
model文件的路径大家改成自己的就好,因为自己的模型太大,所以mesh.scale.set( 0.01, 0.01, 0.01 ),设置尺寸很小
注意这里直接运行会报错
我使用vscode编译,下载Live Server扩展,然后右键open with live server
在这里插入图片描述
弹出网页
在这里插入图片描述

适配到django项目中

将js文件导入

笔者直接用已有项目,不再从零开始

参考文章: link1
参考文章: link2

将three文件夹放到static/js文件夹下,将add_test_stl.html放到templetes/myapp文件夹下
![在这里插入图片描述](https://img-blog.csdnimg.cn/b244a8537bf04a76b4051cf56e8c23d5.png
将three.js文件夹下对应位置的文件分别移动到新建的three文件夹下
controls/OrbitControls.js
environments/RoomEnvironment.js
loaders/STLLoader.js’
libs/lil-gui.module.min.js’

创建html文件

笔者有个templetes文件夹存放项目所有的html文件
在这里新建一个add_test_stl.html
代码如下

<!DOCTYPE html>
{% load static %}
<html lang="en">
	<head>
		<title>three.js test</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background: #bbbbbb;
			}
		</style>
	</head>

	<body>

        <div style="float:left; width:50%;">
            <h2>随机文章</h2>
            <p id="article">这里是随机文章的内容</p>
        </div>
        <div style="float:right; width:50%;">
            <h2>随机配图</h2>
            <img id="image" height="250" src="{% static 'chuanganqi.jpg' %}" class="card-img-top" alt="...">
        </div>
		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script type="importmap">
			{
				"imports": {
					"three": "../../static/js/three/three.module.js",
					"three/addons/": "../../static/js/three/"

				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			import { STLLoader } from 'three/addons/loaders/STLLoader.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			let camera, scene, renderer, controls;

			init();
			animate();

			function init() {

				const container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
				camera.position.set( - 2,2,3 );
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x808080);
				//scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
				addShadowedLight( 1, 0.5, 1, 0xffffff, 10 );
				addShadowedLight( -1, -0.5, - 1, 0xffffff, 10 );

				// model
				const loader = new STLLoader();
				const material = new THREE.MeshPhongMaterial( { color: 0x000080,specular:0x000080,shininess:100} );
				loader.load( '../../static/js/three/model.stl', function (geometry) {
				const mesh = new THREE.Mesh( geometry, material );
				mesh.position.set( 0, 0, 0 );
				mesh.scale.set( 0.01, 0.01, 0.01 );
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add( mesh );

				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( 0.5*window.innerWidth, 0.5*window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 1;
				renderer.outputEncoding = THREE.sRGBEncoding;
				container.appendChild( renderer.domElement );
				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator( renderer );

				//scene.background = new THREE.Color( 0xbbbbbb );
				scene.environment = pmremGenerator.fromScene( environment ).texture;
				controls = new OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;
				controls.minDistance = 0.1;
				controls.maxDistance = 10;
				controls.target.set( 0, 0.35, 0 );
				controls.update();
				window.addEventListener( 'resize', onWindowResize );
				//GUI
				const gui = new GUI();
				const params = {
					color: material.color.getHex(),
				};
				gui.addColor( params, 'color' ).onChange( function ( val ) {
					material.color.setHex( val );
				} );
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight );

			}

			//

			function animate() {
				requestAnimationFrame( animate );
				controls.update(); // required if damping enabled
				render();
			}

			function render() {
				renderer.render( scene, camera );
				//camera.lookAt( cameraTarget );
			}

			function addShadowedLight( x, y, z, color, intensity ) {

				const directionalLight = new THREE.DirectionalLight( color, intensity );
				directionalLight.position.set( x, y, z );
				scene.add( directionalLight );
				directionalLight.castShadow = true;
				const d = 1;
				directionalLight.shadow.camera.left = - d;
				directionalLight.shadow.camera.right = d;
				directionalLight.shadow.camera.top = d;
				directionalLight.shadow.camera.bottom = - d;
				directionalLight.shadow.camera.near = 1;
				directionalLight.shadow.camera.far = 4;
				directionalLight.shadow.bias = - 0.002;

			}
		</script>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144

在view.py文件中添加

def add_stl(request):
    return render(request, 'myapp/add_test_stl.html')
  • 1
  • 2

在urls.py文件中添加路径到urlpatterns 中

def add_stl(request):
    path('add_stl/', views.add_stl, name='add_stl'),
  • 1
  • 2

效果展示

最后在控制台

第一步:python manage.py makemigrations 
第二步:python manage.py migrate  
第三步:python manage.py runserver
  • 1
  • 2
  • 3

打开地址并定位到
http://127.0.0.1:8000/add_stl/

最终结果如下
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/91528
推荐阅读
相关标签
  

闽ICP备14008679号