GuoAnPeng
/
graphite-digestion-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:添加模型1

feature/three
guoapeng 3 months ago
parent
1c519724f2
commit
7d0975b792
2 changed files with 104 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 164
      src/views/dataModel/index.vue

1
package.json
View File

@ -26,6 +26,7 @@
"prettier": "prettier --write ."
},
"dependencies": {
"@dataview/datav-vue3": "0.0.0-test.1672506674342",
"@element-plus/icons-vue": "^2.3.1",
"@types/three": "^0.176.0",
"autoprefixer": "^10.4.20",

164
src/views/dataModel/index.vue
View File

@ -1,4 +1,5 @@
<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'
@ -10,10 +11,13 @@ 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('#ccc')
scene.background = new THREE.Color('#041622')
// 创建相机
camera = new THREE.PerspectiveCamera(
@ -32,59 +36,83 @@ const initThree = () => {
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)
// 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.MeshStandardMaterial({
color: 'blue',
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)
scene.add(mesh)
})
loader.load('./018.stl', (geometry) => {
console.log('geometry', geometry)
// 创建基础材质（可替换为其他材质）
const material = new THREE.MeshStandardMaterial({
color: 0x666666,
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)
scene.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, // 光学折射率
// })
// // 创建网格模型
// 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('./015.stl', (geometry) => {
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: 0x666666,
color: 'red',
metalness: 0.7,
roughness: 0.2,
})
@ -94,33 +122,35 @@ const initThree = () => {
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.scale.set(0.5, 0.5, 0.5)
scene.add(mesh)
modelGroup.add(mesh)
})
modelGroup.position.set(0, 0, 0)
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(250)
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)
}
})
// // 添加键盘事件监听器
// 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()
// const animate = () => {
// requestAnimationFrame(animate)
// controls.update()
// renderer.render(scene, camera)
// }
// animate()
}
onMounted(() => {
@ -129,9 +159,21 @@ onMounted(() => {
</script>
<template>
<div ref="container" />
<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