修改模型

master
夜笙歌 6 months ago
parent e443671363
commit fb545f70ed

@ -1,5 +1,5 @@
# 3ds Max Wavefront OBJ Exporter v0.99 - (c)2007 guruware
# 创建的文件:11.10.2024 09:26:52
# 创建的文件:14.10.2024 13:25:02
newmtl Mat3d66_1176892_7_9595
Kd 0.7109 0.7109 0.7109
@ -16,17 +16,21 @@ newmtl Mat3d66_1176892_7_9595
illum 2
newmtl wire_190039004
Ns 32
d 1
Tr 0
Tf 1 1 1
illum 2
Ka 0.7451 0.1529 0.0157
Kd 0.7451 0.1529 0.0157
Ks 0.3500 0.3500 0.3500
Tr 0.0000
d 1.0000
Tf 1.0000 1.0000 1.0000
Pr 0.6800
Pm 0.0000
Pc 0.0000
Pcr 0.0000
Ni 1.5000
Ke 0.0000 0.0000 0.0000
illum 2
newmtl wire_255255000
Kd 1.0000 1.0000 0.0000
Kd 1.0000 1.0000 1.0000
Ks 0.3500 0.3500 0.3500
Tr 0.0000
d 1.0000

@ -4,86 +4,85 @@
<th:block th:include="include :: header('模型')"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
</script>
<!-- <script type="module">-->
<!-- import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'-->
<!-- import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'-->
<!-- import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'-->
<!-- import * as THREE from '/js/three/build/three.module.min.js'-->
<!-- console.log(OrbitControls)-->
<!-- const scene = new THREE.Scene()-->
<!-- // scene.background = new THREE.Color(0x000000,0)-->
<!-- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000000000000000000);-->
<!-- const pointLight = new THREE.PointLight(0xffffff, 1) //光源颜色 光照强度-->
<!-- const ambient = new THREE.AmbientLight(0xffffff, 1)-->
<!-- const light = new THREE.DirectionalLight(0xffffff, 1)-->
<!-- const renderer = new THREE.WebGLRenderer({-->
<!-- // antialias: true,-->
<!-- alpha: true,-->
<!-- })-->
<!-- renderer.setClearColor(0x000000, 0)-->
<!-- const controls = new OrbitControls(camera, renderer.domElement)-->
<!-- controls.target = new THREE.Vector3(-1, -1, -1)-->
<!-- controls.update()-->
<!-- renderer.setSize(window.innerWidth, window.innerHeight)-->
<!-- camera.position.set(5, 5, 5)-->
<!-- camera.updateProjectionMatrix()-->
<!-- scene.add(pointLight)-->
<!-- scene.add(ambient)-->
<!-- light.position.set(66, 66, 66)-->
<!-- light.target.position.set(0, 0, 0)-->
<!-- scene.add(light)-->
<!-- console.log(renderer)-->
<!-- document.getElementById('three').appendChild(renderer.domElement)-->
<!-- const geometry = new THREE.BoxGeometry(1, 1, 1);-->
<!-- const material = new THREE.MeshBasicMaterial({color: 0x00ff00});-->
<!-- const cube = new THREE.Mesh(geometry, material);-->
<!-- scene.add(cube);-->
<!-- camera.position.z = 5;-->
<!-- function animate() {-->
<!-- requestAnimationFrame(animate)-->
<!-- renderer.render(scene, camera)-->
<!-- }-->
<!-- animate()-->
<!-- let mtlLoader = new MTLLoader()-->
<!-- mtlLoader.load(`/model/model1/daxingjichang.mtl`,-->
<!-- materials => {-->
<!-- console.log(123123213)-->
<!-- materials.preload()-->
<!-- let loader = new OBJLoader()-->
<!-- loader.setMaterials(materials)-->
<!-- loader.load(-->
<!-- `/model/model1/daxingjichang.obj`,-->
<!-- object => {-->
<!-- scene.add(object)-->
<!-- // 更新渲染器-->
<!-- renderer.render(scene, camera)-->
<!-- },-->
<!-- xhr => {-->
<!-- },-->
<!-- (err) => {-->
<!-- }-->
<!-- )-->
<!-- })-->
<!-- </script>-->
<script>
const btnClick = (index) => {
console.log(index)
}
</script>
<script type="module">
import {OrbitControls} from '/js/three/examples/jsm/controls/OrbitControls.js'
import {MTLLoader} from '/js/three/examples/jsm/loaders/MTLLoader.js'
import {OBJLoader} from '/js/three/examples/jsm/loaders/OBJLoader.js'
import * as THREE from '/js/three/build/three.module.min.js'
const scene = new THREE.Scene()
// scene.background = new THREE.Color(0x000000,0)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
const pointLight = new THREE.PointLight(0xffffff, 10) //光源颜色 光照强度
const ambient = new THREE.AmbientLight(0xffffff, 2)
const light = new THREE.DirectionalLight(0xffffff, 1)
const renderer = new THREE.WebGLRenderer({
// antialias: true,
alpha: true,
})
renderer.setClearColor(0x000000, 0)
const controls = new OrbitControls(camera, renderer.domElement)
controls.target = new THREE.Vector3(-250, -872, 1814)
controls.update()
renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.set(-1218,2326,3986)
camera.rotation.x = -0.9744
camera.rotation.y = -0.2453
camera.rotation.z = -0.3435
camera.updateProjectionMatrix()
controls.update()
// scene.add(pointLight)
scene.add(ambient)
light.position.set(-250, 872, 1814)
light.target.position.set(-1218,2326,3986)
// scene.add(light)
console.log(renderer)
document.getElementById('three').appendChild(renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
animate()
let mtlLoader = new MTLLoader()
mtlLoader.load(`/model/daxingjichang/daxingjichang.mtl`,
materials => {
materials.preload()
let loader = new OBJLoader()
loader.setMaterials(materials)
loader.load(
`/model/daxingjichang/daxingjichang.obj`,
object => {
scene.add(object)
// 更新渲染器
renderer.render(scene, camera)
},
xhr => {
},
(err) => {
}
)
})
</script>
</head>
<style>
body::-webkit-scrollbar{
display: none;
}
.bg {
width: 100vw;
height: 100vh;
@ -100,67 +99,64 @@
display: block;
}
.qy {
position: absolute;
transform: translate(-50%, -50%);
top: 96.5%;
width: 1vw;
height: 0.5vw;
background-image: url("/img/model/zs1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.qy1L {
left: 26.2%;
}
.qy1R {
transform: translate(-50%, -50%) scale(-1);
left: 32.6%;
}
.qy2L {
left: 36.6%;
.btn1 {
color: #fff;
}
.qy2R {
transform: translate(-50%, -50%) scale(-1);
left: 43%;
.btns {
position: absolute;
bottom: 0;
left: 25%;
width: 48vw;
height: 3.3vw;
white-space: nowrap;
overflow: auto;
}
.qy3L {
left: 47%;
.btns::-webkit-scrollbar{
display: none;
}
.qy3R {
transform: translate(-50%, -50%) scale(-1);
left: 53.4%;
.bottomBtn {
display: inline-block;
position: relative;
width: 9.5vw;
height: 3vw;
text-align: center;
line-height: 3vw;
font-size: 1.03vw;
letter-spacing: 0.1vw;
color: #fff9;
cursor: pointer;
}
.qy4L {
left: 56.4%;
}
.qy4R {
transform: translate(-50%, -50%) scale(-1);
left: 62.7%;
.qy {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
width: 1vw;
height: 0.5vw;
background-image: url("/img/model/zs1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.qy5L {
left: 65.6%;
.qyL {
left: 12%;
}
.qy5R {
.qyR {
transform: translate(-50%, -50%) scale(-1);
left: 71.9%;
right: calc(12% - 0.5vw);
}
.qyBottom {
position: absolute;
display: none;
transform: translate(-50%, -50%);
top: 98.5%;
left: 29.4%;
bottom: 5%;
left: 50%;
width: 7.5vw;
height: 0.21vw;
background-image: url("/img/model/zs3.png");
@ -168,48 +164,45 @@
background-repeat: no-repeat;
}
.bottomBtn {
position: absolute;
transform: translate(-50%, -50%);
top: 96.6%;
width: 7.5vw;
height: 3vw;
text-align: center;
line-height: 3vw;
font-size: 1.03vw;
letter-spacing: 0.1vw;
color: #fff9;
cursor: pointer;
}
.btn1 {
color: #fff;
}
</style>
<body class="gray-bg">
<!-- 29.4 39.8 50.1 59.6 68.8 -->
<div>
<div id="three" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;"></div>
<div class="bg"></div>
<div class="bottomBtn btn1" onclick="btnClick(1)" style="left: 29.4%;">区域01</div>
<div class="bottomBtn" onclick="btnClick(2)" style="left: 39.8%;">区域02</div>
<div class="bottomBtn" onclick="btnClick(3)" style="left: 50.1%;">区域03</div>
<div class="bottomBtn" onclick="btnClick(4)" style="left: 59.6%;">区域04</div>
<div class="bottomBtn" onclick="btnClick(5)" style="left: 68.8%;">区域05</div>
<div class="qy qy1L"></div>
<div class="qy qy1R"></div>
<div class="qy qy2L"></div>
<div class="qy qy2R"></div>
<div class="qy qy3L"></div>
<div class="qy qy3R"></div>
<div class="qy qy4L"></div>
<div class="qy qy4R"></div>
<div class="qy qy5L"></div>
<div class="qy qy5R"></div>
<div class="qyBottom"></div>
<div id="three" style="width: 100vw;height: 100vh;position:absolute;top: 0;left: 0;"></div>
<div class="btns" id="btns">
</div>
</div>
<th:block th:include="include :: footer"/>
<script>
const btnClick = (el,id) => {
$(el).children('.qyBottom').css({display:'inline-block'})
$(el).siblings().each(function (){
$(this).children('.qyBottom').css({display:'none'})
})
$.post(ctx + 'api/getCountNumberById', {id:id.toString()}, (e) => {
console.log(e)
})
}
</script>
<script>
$.post(ctx + 'api/getArea', {}, (e) => {
let html = ``
e.data.forEach(v => {
html += `
<div class="bottomBtn btn1" onclick="btnClick(this,${v.storeId})" style="font-size: ${v.storeName.length > 5 ? '0.8vw' : '1.03vw'}">
<div class="qy qyL"></div>
<div class="qy qyR"></div>
<div class="qyBottom"></div>
<span>
${v.storeName}
</span>
</div>
`
})
$("#btns").html(html)
})
</script>
</body>
</html>

Loading…
Cancel
Save