Compare commits
merge into: GuoAnPeng:master
GuoAnPeng:feature/three
GuoAnPeng:master
pull from: GuoAnPeng:feature/three
GuoAnPeng:feature/three
GuoAnPeng:master
15 Commits
master
...
feature/th
| Author | SHA1 | Message | Date |
|---|---|---|---|
 guoapeng
|
e705da6f3b |
fix:12
|
3 months ago |
|
guoapeng
|
bf9bfd76d4 |
fix:1
|
3 months ago |
|
guoapeng
|
771e15a0b8 |
fix: Update version to V0.0.13
|
3 months ago |
|
guoapeng
|
90d3235bee |
fix:自检ui;首页按钮状态
|
3 months ago |
|
guoapeng
|
5c228c864e |
fix: Update version to V0.0.12
|
3 months ago |
|
guoapeng
|
de87543f77 |
fix: Update version to V0.0.11
|
3 months ago |
|
guoapeng
|
9fe89ade16 |
fix: Update version to V0.0.10
|
3 months ago |
|
guoapeng
|
a5c91426a2 |
fix:去除工艺功能; 自检参数修改1
|
3 months ago |
|
guoapeng
|
e689111213 |
fix:去除工艺功能; 自检参数修改
|
3 months ago |
|
guoapeng
|
59376e7385 |
fix: Update version to V0.0.9
|
3 months ago |
|
guoapeng
|
7d0975b792 |
fix:添加模型1
|
3 months ago |
|
guoapeng
|
1c519724f2 |
fix:添加模型
|
3 months ago |
|
guoapeng
|
84ac3951d1 |
feat:添加物体
|
3 months ago |
|
guoapeng
|
ef22d57c4a |
feat:添加threejs
|
3 months ago |
|
guoapeng
|
88c6b6ad34 |
feat: 新建数据模型
|
3 months ago |
9 changed files with 272 additions and 60 deletions
-
5package.json
-
BINpublic/013.stl
-
BINpublic/015.stl
-
BINpublic/018.stl
-
54src/components/check/index.vue
-
1src/libs/utils.ts
-
11src/router/routes.ts
-
181src/views/dataModel/index.vue
-
80src/views/home/index.vue
@ -0,0 +1,181 @@ |
|||
<script setup lang="ts"> |
|||
import { BorderBox11 } from '@dataview/datav-vue3' |
|||
import * as THREE from 'three' |
|||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' |
|||
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader' |
|||
import { onMounted, ref } from 'vue' |
|||
|
|||
const container = ref<HTMLDivElement>() |
|||
let scene: THREE.Scene |
|||
let camera: THREE.PerspectiveCamera |
|||
let renderer: THREE.WebGLRenderer |
|||
let controls: OrbitControls |
|||
let mesh: THREE.Mesh |
|||
// 在合适的位置定义组对象 |
|||
// const modelGroup = new THREE.Group() |
|||
|
|||
const initThree = () => { |
|||
scene = new THREE.Scene() |
|||
// scene.background = new THREE.Color('#ccc') |
|||
scene.background = new THREE.Color('#041622') |
|||
|
|||
// 创建相机 |
|||
camera = new THREE.PerspectiveCamera( |
|||
75, |
|||
800 / 500, |
|||
1, |
|||
3000, |
|||
) |
|||
camera.position.set(292, 223, 185) |
|||
camera.lookAt(0, 0, 0) |
|||
|
|||
// 创建渲染器 |
|||
renderer = new THREE.WebGLRenderer({ antialias: true }) |
|||
renderer.setSize(800, 500) |
|||
renderer.setPixelRatio(window.devicePixelRatio) |
|||
container.value?.appendChild(renderer.domElement) |
|||
|
|||
controls = new OrbitControls(camera, renderer.domElement) |
|||
renderer.render(scene, camera) |
|||
controls.enableDamping = true |
|||
controls.addEventListener('change', () => { |
|||
renderer.render(scene, camera) // 执行渲染操作 |
|||
})// 监听鼠标、键盘事件 |
|||
|
|||
// 添加环境光 |
|||
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8) |
|||
scene.add(ambientLight) |
|||
|
|||
// 添加点光源 |
|||
// const pointLight = new THREE.PointLight(0xFFFFFF, 1) |
|||
// pointLight.position.set(5, 5, 5) |
|||
// scene.add(pointLight) |
|||
|
|||
// 加载STL模型 |
|||
const loader = new STLLoader() |
|||
// loader.load('./013.stl', (geometry) => { |
|||
// console.log('geometry', geometry) |
|||
// // 创建基础材质（可替换为其他材质） |
|||
// const material = new THREE.MeshPhysicalMaterial({ |
|||
// color: '#b0b0b0', // 更真实的金属色 |
|||
// metalness: 1, // 完全金属表面 |
|||
// roughness: 0.1, // 极低表面粗糙度 |
|||
// clearcoat: 1, // 添加清漆层增强光泽 |
|||
// clearcoatRoughness: 0.05, // 清漆层光滑度 |
|||
// reflectivity: 1, // 完全反射环境 |
|||
// ior: 1.5, // 光学折射率 |
|||
// }) |
|||
// // 创建网格模型 |
|||
// mesh = new THREE.Mesh(geometry, material) |
|||
// // 居中模型 |
|||
// // const box = new THREE.Box3().setFromObject(mesh) |
|||
// // const center = box.getCenter(new THREE.Vector3()) |
|||
// // mesh.position.sub(center) // 将模型中心移到原点 |
|||
// mesh.position.set(10, 0, 0) |
|||
// mesh.scale.set(0.2, 0.2, 0.2) |
|||
// scene.add(mesh) |
|||
// modelGroup.add(mesh) |
|||
// }) |
|||
// loader.load('./018.stl', (geometry) => { |
|||
// console.log('geometry', geometry) |
|||
// // 创建基础材质（可替换为其他材质） |
|||
// const material = new THREE.MeshPhysicalMaterial({ |
|||
// color: '#b0b0b0', // 更真实的金属色 |
|||
// metalness: 1, // 完全金属表面 |
|||
// roughness: 0.1, // 极低表面粗糙度 |
|||
// clearcoat: 1, // 添加清漆层增强光泽 |
|||
// clearcoatRoughness: 0.05, // 清漆层光滑度 |
|||
// reflectivity: 1, // 完全反射环境 |
|||
// ior: 1.5, // 光学折射率 |
|||
// }) |
|||
// // 创建网格模型 |
|||
// mesh = new THREE.Mesh(geometry, material) |
|||
// // 居中模型 |
|||
// const box = new THREE.Box3().setFromObject(mesh) |
|||
// const center = box.getCenter(new THREE.Vector3()) |
|||
// mesh.position.sub(center) // 将模型中心移到原点 |
|||
// mesh.scale.set(0.5, 0.5, 0.5) |
|||
// scene.add(mesh) |
|||
// modelGroup.add(mesh) |
|||
// }) |
|||
|
|||
loader.load('./013.stl', (geometry) => { |
|||
console.log('geometry', geometry) |
|||
// 创建基础材质（可替换为其他材质） |
|||
// const material = new THREE.MeshPhysicalMaterial({ |
|||
// color: '#b0b0b0', // 更真实的金属色 |
|||
// metalness: 1, // 完全金属表面 |
|||
// roughness: 0.1, // 极低表面粗糙度 |
|||
// clearcoat: 1, // 添加清漆层增强光泽 |
|||
// clearcoatRoughness: 0.05, // 清漆层光滑度 |
|||
// reflectivity: 1, // 完全反射环境 |
|||
// ior: 1.5, // 光学折射率 |
|||
// }) |
|||
const material = new THREE.MeshStandardMaterial({ |
|||
color: 'red', |
|||
metalness: 0.7, |
|||
roughness: 0.2, |
|||
}) |
|||
// 创建网格模型 |
|||
mesh = new THREE.Mesh(geometry, material) |
|||
// 居中模型 |
|||
const box = new THREE.Box3().setFromObject(mesh) |
|||
const center = box.getCenter(new THREE.Vector3()) |
|||
mesh.position.sub(center) // 将模型中心移到原点 |
|||
mesh.scale.set(0.5, 0.5, 0.5) |
|||
mesh.rotateX(Math.PI / 2) |
|||
// mesh.position.set(-100, 0, 0) |
|||
scene.add(mesh) |
|||
// modelGroup.add(mesh) |
|||
}) |
|||
// modelGroup.position.set(0, 0, 0) |
|||
|
|||
// AxesHelper：辅助观察的坐标系 |
|||
const axesHelper = new THREE.AxesHelper(100) |
|||
scene.add(axesHelper) |
|||
|
|||
// // 添加键盘事件监听器 |
|||
// window.addEventListener('keydown', (event) => { |
|||
// if (event.key === 'ArrowUp') { |
|||
// // 放大 |
|||
// camera.position.multiplyScalar(0.9) |
|||
// } |
|||
// else if (event.key === 'ArrowDown') { |
|||
// // 缩小 |
|||
// camera.position.multiplyScalar(1.1) |
|||
// } |
|||
// }) |
|||
|
|||
// 渲染循环 |
|||
// const animate = () => { |
|||
// requestAnimationFrame(animate) |
|||
// controls.update() |
|||
// renderer.render(scene, camera) |
|||
// } |
|||
// animate() |
|||
} |
|||
|
|||
onMounted(() => { |
|||
initThree() |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="data-content"> |
|||
<BorderBox11 class="box" :color="['#1A4468', '#163A5A']" background-color="#041622" title="石墨消解仪"> |
|||
<div ref="container" /> |
|||
</BorderBox11> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.data-content { |
|||
padding: 0 !important; |
|||
background: rgba(0,0,0,0) !important; |
|||
} |
|||
.box { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 60px 20px 30px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue