256 lines
7.2 KiB
HTML
256 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>xyt</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="info">
|
||
|
|
<button onclick="toggleFly()">飞行</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from '../build/three.module.js';
|
||
|
|
|
||
|
|
import { MapControls } from './jsm/controls/OrbitControls.js';
|
||
|
|
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
|
||
|
|
import { Water } from './jsm/objects/Water.js';
|
||
|
|
import { Sky } from './jsm/objects/Sky.js';
|
||
|
|
|
||
|
|
let camera, controls, scene, renderer, demObj, dam, waters = [], sun, model;
|
||
|
|
let flyCamera;
|
||
|
|
|
||
|
|
var flying = false;
|
||
|
|
|
||
|
|
window.toggleFly = () => {
|
||
|
|
flying = !flying;
|
||
|
|
}
|
||
|
|
|
||
|
|
const path1 = new THREE.CatmullRomCurve3([
|
||
|
|
new THREE.Vector3(-38.73545444304811, 246.8576701735792, -250.64056339831274),
|
||
|
|
new THREE.Vector3(-53.67879073627921, 251.34477643999833, 0.4232412308111009),
|
||
|
|
new THREE.Vector3(146.62825732095502, 384.32501391193694, 352.3519798946485),
|
||
|
|
new THREE.Vector3(432.30672196910064, 226.40848285611517, 7.28995967041957),
|
||
|
|
new THREE.Vector3(106.52547607860384, 309.026651514802, -529.0380724365381),
|
||
|
|
]);
|
||
|
|
path1.closed = true;
|
||
|
|
|
||
|
|
const path2 = new THREE.CatmullRomCurve3([
|
||
|
|
new THREE.Vector3(112.48338959315699, 48.902711264605166, -153.5137711517042),
|
||
|
|
new THREE.Vector3(126.8210182917062, 2.123939037322998, -0.5538167478368097),
|
||
|
|
new THREE.Vector3(207.91426783818716, 59.35824910284018, 90.40571014625523),
|
||
|
|
new THREE.Vector3(226.8805889686024, 2.123939990997327, -55.55973408408994),
|
||
|
|
new THREE.Vector3(78.27833683313831, 45.01679769354621, -249.16294511632157),
|
||
|
|
]);
|
||
|
|
path2.closed = true;
|
||
|
|
|
||
|
|
const raycaster = new THREE.Raycaster();
|
||
|
|
const pointer = new THREE.Vector2();
|
||
|
|
|
||
|
|
sun = new THREE.Vector3();
|
||
|
|
|
||
|
|
init();
|
||
|
|
animate();
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
scene.background = new THREE.Color(0x000);
|
||
|
|
scene.fog = new THREE.FogExp2(0xeeeedd, 0.0003);
|
||
|
|
|
||
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||
|
|
document.body.appendChild(renderer.domElement);
|
||
|
|
|
||
|
|
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
|
||
|
|
camera.position.set(-631.607889042487, 218.75390271908904, 339.583699037265);
|
||
|
|
|
||
|
|
camera.lookAt(0, 100, 0);
|
||
|
|
|
||
|
|
flyCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
|
||
|
|
|
||
|
|
controls = new MapControls(camera, renderer.domElement);
|
||
|
|
|
||
|
|
controls.enableDamping = false;
|
||
|
|
controls.screenSpacePanning = false;
|
||
|
|
|
||
|
|
controls.minDistance = 1;
|
||
|
|
controls.maxDistance = 2000;
|
||
|
|
controls.minPolarAngle = 0.1;
|
||
|
|
controls.maxPolarAngle = Math.PI / 2 - 0.1;
|
||
|
|
|
||
|
|
// world
|
||
|
|
{
|
||
|
|
const gltfLoader = new GLTFLoader();
|
||
|
|
|
||
|
|
gltfLoader.load('models/dem_e2.gltf',
|
||
|
|
(gltf) => {
|
||
|
|
demObj = gltf.scene;
|
||
|
|
|
||
|
|
console.log('-------------------mesh--------------------');
|
||
|
|
console.log(demObj);
|
||
|
|
|
||
|
|
demObj.position.set(0, -150, 0);
|
||
|
|
demObj.scale.set(13.12, 13.12, 13.12);
|
||
|
|
|
||
|
|
demObj.traverse(function (child) {
|
||
|
|
if (child.isMesh && child.name === 'Mesh_0001') {
|
||
|
|
child.material = new THREE.MeshBasicMaterial({ side: 1, color: 0x2f2b1d });
|
||
|
|
console.log(child);
|
||
|
|
} else if (child.isMesh && child.name === 'Mesh_0') {
|
||
|
|
const loader = new THREE.TextureLoader();
|
||
|
|
loader.load('./models/Image_0.jpg',
|
||
|
|
function (texture) {
|
||
|
|
texture.flipY = false;
|
||
|
|
child.material.map = texture;
|
||
|
|
},
|
||
|
|
undefined,
|
||
|
|
function (err) {
|
||
|
|
console.error('load texture failed');
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
scene.add(demObj);
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
{
|
||
|
|
renderer.domElement.onclick = (event) => {
|
||
|
|
pointer.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
|
||
|
|
pointer.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
|
||
|
|
raycaster.setFromCamera(pointer, camera);
|
||
|
|
|
||
|
|
const intersects = raycaster.intersectObject(demObj);
|
||
|
|
|
||
|
|
console.log(intersects);
|
||
|
|
|
||
|
|
if (intersects.length > 0) {
|
||
|
|
console.log('-----------------------');
|
||
|
|
console.log(camera.position);
|
||
|
|
console.log(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (true) {
|
||
|
|
|
||
|
|
const sky = new Sky();
|
||
|
|
sky.scale.setScalar(4000);
|
||
|
|
|
||
|
|
scene.add(sky);
|
||
|
|
|
||
|
|
const skyUniforms = sky.material.uniforms;
|
||
|
|
|
||
|
|
skyUniforms['turbidity'].value = 10;
|
||
|
|
skyUniforms['rayleigh'].value = 2;
|
||
|
|
skyUniforms['mieCoefficient'].value = 0.005;
|
||
|
|
skyUniforms['mieDirectionalG'].value = 0.8;
|
||
|
|
|
||
|
|
const parameters = {
|
||
|
|
elevation: 21,
|
||
|
|
azimuth: 180
|
||
|
|
};
|
||
|
|
|
||
|
|
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
||
|
|
|
||
|
|
function updateSun() {
|
||
|
|
|
||
|
|
const phi = THREE.MathUtils.degToRad(90 - parameters.elevation);
|
||
|
|
const theta = THREE.MathUtils.degToRad(parameters.azimuth);
|
||
|
|
|
||
|
|
sun.setFromSphericalCoords(1, phi, theta);
|
||
|
|
|
||
|
|
sky.material.uniforms['sunPosition'].value.copy(sun);
|
||
|
|
waters.forEach(water => {
|
||
|
|
water.material.uniforms['sunDirection'].value.copy(sun).normalize();
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
//scene.environment = pmremGenerator.fromScene(sky).texture;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
updateSun();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// lights
|
||
|
|
{
|
||
|
|
|
||
|
|
const dirLight1 = new THREE.DirectionalLight(0xcccccc);
|
||
|
|
dirLight1.position.set(-1, 1, -1);
|
||
|
|
scene.add(dirLight1);
|
||
|
|
|
||
|
|
const ambientLight = new THREE.AmbientLight(0x444444);
|
||
|
|
scene.add(ambientLight);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('resize', onWindowResize);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function onWindowResize() {
|
||
|
|
|
||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
flyCamera.aspect = window.innerWidth / window.innerHeight;
|
||
|
|
flyCamera.updateProjectionMatrix();
|
||
|
|
|
||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
|
||
|
|
render();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
|
||
|
|
const time = performance.now() * 0.001;
|
||
|
|
|
||
|
|
waters.forEach(water => {
|
||
|
|
water.material.uniforms['time'].value += 1.0 / 60.0;
|
||
|
|
})
|
||
|
|
|
||
|
|
if (flying) {
|
||
|
|
|
||
|
|
const looptime = 20;
|
||
|
|
const t = (time % looptime) / looptime;
|
||
|
|
const position = new THREE.Vector3();
|
||
|
|
const lookAt = new THREE.Vector3();
|
||
|
|
path1.getPointAt(t, position);
|
||
|
|
path2.getPointAt(t, lookAt);
|
||
|
|
|
||
|
|
flyCamera.position.copy(position);
|
||
|
|
flyCamera.lookAt(lookAt);
|
||
|
|
}
|
||
|
|
|
||
|
|
renderer.render(scene, flying ? flyCamera : camera);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|