<tauri><threejs><rust><GUI>基于tauri和threejs,实现一个3D图形浏览程序

前言

本专栏是基于rust和tauri,由于tauri是前、后端结合的GUI框架,既可以直接生成包含前端代码的文件,也可以在已有的前端项目上集成tauri框架,将前端页面化为桌面GUI。

发文平台

稀土掘金

环境配置

系统:windows 10 平台:visual studio code 语言:rust、javascript 库:tauri2.0

概述

本文是基于tauri和threejs,将threejs创建的3D画面在tauri的窗口中呈现。

本文的实现其实非常简单,threejs本身就可以在浏览器渲染3D图像,而tauri则可以结合前后端,将浏览器的页面显示在窗口中。

1、新建tauri项目

可以参考笔者之前的项目:

< tauri >< rust >< GUI >使用tauri实现一个简单的计算器程序

或者参考tauri官网的手册: tauri.app/zh-cn/start...

本文就不再赘述新建项目的相关内容了,我们假设已经创建完成,我们在public文件夹中新建一个网页three.html,添加一个div:

html 复制代码
<div class="container">
    <h1>threejs 3D演示</h1>
    <div id="threejs-view">
        <canvas id="threejs-canvas"></canvas>
    </div>
</div>

然后,我们在main.js中获取html并显示:

js 复制代码
async function loadhtml(htmlpath,div){

  const response = await fetch(htmlpath);
  const template = await response.text();
  document.querySelector(div).innerHTML = template;

}

await loadhtml('../public/three.html','#app');

2、使用threejs显示3D

然后,我们需要使用threejs来实现3D图像的显示:

javascript 复制代码
import * as THREE from "three";
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
javascript 复制代码
//const view = document.getElementById('threejs-view');
const canvas = document.getElementById('threejs-canvas');
//
let scene,camera,renderer,group;
async function loadProcess(){
 
  initThreeJs();
}
 function initThreeJs(){
    scene = new THREE.Scene();
		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
				
		renderer = new THREE.WebGLRenderer({antialias:true,canvas});
    const w1 = canvas.clientWidth;
    const h1 = canvas.clientHeight;
    renderer.setSize( w1, h1 );
		//renderer.setSize( window.innerWidth, window.innerHeight );
		//canvas.appendChild(renderer.domElement);
    //
    const geometry = new THREE.SphereGeometry( 1.5, 32, 16,0,Math.PI*2,0,Math.PI );

		group = new THREE.Group();
		//线材质
	  const lineMaterial = new THREE.LineBasicMaterial( { 
					color: '#55aaff', 
					transparent: true, 
					opacity: 0.5 ,
				});
		//光材质
		group.add(new THREE.LineSegments(geometry,lineMaterial));
		const meshMaterial = new THREE.MeshPhongMaterial( { 
					color: '#25b0f5', 
					emissive: '#072534', 
					side: THREE.DoubleSide, 
					flatShading: true ,
				});
		group.add(new THREE.Mesh( geometry, meshMaterial ) );
		scene.add(group);
    //
    // 从上方照射的白色平行光,强度为 0.5。
				const lights = [];
				lights[ 0 ] = new THREE.DirectionalLight( 0xffffff, 3 );
				lights[ 1 ] = new THREE.DirectionalLight( 0xffffff, 3 );
				lights[ 2 ] = new THREE.DirectionalLight( 0xffffff, 3 );
				
				lights[ 0 ].position.set( 0, 200, 0 );
				lights[ 1 ].position.set( 100, 200, 100 );
				lights[ 2 ].position.set( - 100, - 200, - 100 );
				scene.add( lights[ 0 ] );
				scene.add( lights[ 1 ] );
				scene.add( lights[ 2 ] );
				//
				const controls = new OrbitControls( camera, renderer.domElement );
				
				camera.position.z = 5;
				
				controls.update();
      //
      function animate(){
				
				group.rotation.x += 0.005;
				group.rotation.y += 0.005;
				
				requestAnimationFrame(() => animate());
				renderer.render(scene, camera);
			}
      animate();


 }

loadProcess();

我们来看下上面代码运行后的演示:

bash 复制代码
npm run tauri dev
相关推荐
cypking22 分钟前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo61726 分钟前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Micro麦可乐28 分钟前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo61729 分钟前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐34 分钟前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
方块海绵43 分钟前
浅析 MongoDB
后端
Hilaku1 小时前
AVIF vs. JPEG XL:2025年,我们该为网站选择哪种下一代图片格式?
前端·javascript·html
中东大鹅1 小时前
SpringBoot配置外部Servlet
spring boot·后端·servlet
一语长情1 小时前
从《架构整洁之道》看编程范式:结构化、面向对象与函数式编程精要
后端·架构·代码规范
叶 落1 小时前
[Rust 基础课程]猜数字游戏-获取用户输入并打印
rust·rust基础