wangh
/
beijing_daxing_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加模型

Browse Source
master
夜笙歌 3 months ago
parent d274403a08
commit f18ecc2cd5
5 changed files with 196 additions and 68 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-admin/src/main/resources/static/img/model/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
ruoyi-admin/src/main/resources/static/img/model/zs1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 B

BIN
ruoyi-admin/src/main/resources/static/img/model/zs2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 B

BIN
ruoyi-admin/src/main/resources/static/img/model/zs3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 585 B

264
ruoyi-manage/src/main/resources/templates/manage/model/model.html
Unescape Escape View File

@ -4,82 +4,210 @@
<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)
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
})
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)
}
<!-- <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;-->
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) => {
}
)
})
<!-- 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>
</head>
<style>
.bg {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/model/bg.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#three canvas {
background-color: transparent;
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%;
}
.qy2R {
transform: translate(-50%, -50%) scale(-1);
left: 43%;
}
.qy3L {
left: 47%;
}
.qy3R {
transform: translate(-50%, -50%) scale(-1);
left: 53.4%;
}
.qy4L {
left: 56.4%;
}
.qy4R {
transform: translate(-50%, -50%) scale(-1);
left: 62.7%;
}
.qy5L {
left: 65.6%;
}
.qy5R {
transform: translate(-50%, -50%) scale(-1);
left: 71.9%;
}
.qyBottom {
position: absolute;
transform: translate(-50%, -50%);
top: 98.5%;
left: 29.4%;
width: 7.5vw;
height: 0.21vw;
background-image: url("/img/model/zs3.png");
background-size: 100% 100%;
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>
<script>
</script>

Write Preview
Loading…
Cancel
Save