351 lines
10 KiB
JavaScript
351 lines
10 KiB
JavaScript
import * as THREE from './three/three.module.js'
|
|
// import { api } from '../../../scripts/api.js'
|
|
import { OrbitControls } from './three/OrbitControls.js'
|
|
import { RoomEnvironment } from './three/RoomEnvironment.js'
|
|
|
|
const api = {
|
|
apiURL: url => {
|
|
console.log(url)
|
|
return url
|
|
}
|
|
}
|
|
|
|
const visualizer = document.getElementById('visualizer')
|
|
const container = document.getElementById('container')
|
|
const progressDialog = document.getElementById('progress-dialog')
|
|
const progressIndicator = document.getElementById('progress-indicator')
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
antialias: true,
|
|
extensions: {
|
|
derivatives: true
|
|
}
|
|
})
|
|
renderer.setPixelRatio(window.devicePixelRatio)
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
|
|
if (container) container.appendChild(renderer.domElement)
|
|
|
|
const pmremGenerator = new THREE.PMREMGenerator(renderer)
|
|
|
|
// scene
|
|
const scene = new THREE.Scene()
|
|
scene.background = new THREE.Color(0x000000)
|
|
scene.environment = pmremGenerator.fromScene(
|
|
new RoomEnvironment(renderer),
|
|
0.04
|
|
).texture
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff)
|
|
|
|
const camera = new THREE.PerspectiveCamera(
|
|
40,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
1000
|
|
)
|
|
camera.position.set(0, 0, 10)
|
|
const pointLight = new THREE.PointLight(0xffffff, 15)
|
|
camera.add(pointLight)
|
|
|
|
const controls = new OrbitControls(camera, renderer.domElement)
|
|
controls.target.set(0, 0, 0)
|
|
controls.update()
|
|
controls.enablePan = true
|
|
controls.enableDamping = true
|
|
|
|
// Handle window resize event
|
|
window.onresize = function () {
|
|
camera.aspect = window.innerWidth / window.innerHeight
|
|
camera.updateProjectionMatrix()
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
}
|
|
|
|
var lastReferenceImage = ''
|
|
var lastDepthMap = ''
|
|
var needUpdate = false
|
|
|
|
function frameUpdate () {
|
|
var referenceImage = visualizer?.getAttribute('reference_image')
|
|
var depthMap = visualizer?.getAttribute('depth_map')
|
|
if (referenceImage == lastReferenceImage && depthMap == lastDepthMap) {
|
|
if (needUpdate) {
|
|
controls.update()
|
|
renderer.render(scene, camera)
|
|
}
|
|
requestAnimationFrame(frameUpdate)
|
|
} else {
|
|
needUpdate = false
|
|
scene.clear()
|
|
if (progressDialog) progressDialog.open = true
|
|
lastReferenceImage = referenceImage
|
|
lastDepthMap = depthMap
|
|
if (lastReferenceImage && lastReferenceImage != 'undefined') {
|
|
// console.log('lastReferenceImage',typeof(lastReferenceImage),lastDepthMap)
|
|
main(JSON.parse(lastReferenceImage), JSON.parse(lastDepthMap))
|
|
}
|
|
}
|
|
}
|
|
|
|
const onProgress = function (xhr) {
|
|
if (xhr.lengthComputable) {
|
|
progressIndicator.value = (xhr.loaded / xhr.total) * 100
|
|
}
|
|
}
|
|
|
|
const onError = function (e) {
|
|
console.error(e)
|
|
}
|
|
|
|
async function main (referenceImageParams, depthMapParams) {
|
|
let referenceTexture, depthTexture
|
|
let imageWidth = 10 // Default width
|
|
let imageHeight = 10 // Default height, will be updated based on the image's aspect ratio
|
|
// console.log('#referenceImageParams', referenceImageParams)
|
|
if (referenceImageParams?.filename) {
|
|
console.log('referenceImageParams', referenceImageParams)
|
|
const referenceImageUrl = api
|
|
.apiURL('/view?' + new URLSearchParams(referenceImageParams))
|
|
.replace(/extensions.*\//, '')
|
|
const referenceImageExt = referenceImageParams.filename.slice(
|
|
referenceImageParams.filename.lastIndexOf('.') + 1
|
|
)
|
|
|
|
if (
|
|
referenceImageExt === 'png' ||
|
|
referenceImageExt === 'jpg' ||
|
|
referenceImageExt === 'jpeg'
|
|
) {
|
|
const referenceImageLoader = new THREE.TextureLoader()
|
|
referenceTexture = await new Promise((resolve, reject) => {
|
|
referenceImageLoader.load(
|
|
referenceImageUrl,
|
|
texture => {
|
|
// Once the image is loaded, update the width and height based on the image's aspect ratio
|
|
imageWidth = 10 // Keep the width as 10
|
|
imageHeight = texture.image.height / (texture.image.width / 10)
|
|
resolve(texture)
|
|
},
|
|
undefined,
|
|
reject
|
|
)
|
|
})
|
|
}
|
|
}
|
|
|
|
if (depthMapParams?.filename) {
|
|
const depthMapUrl = api
|
|
.apiURL('/view?' + new URLSearchParams(depthMapParams))
|
|
.replace(/extensions.*\//, '')
|
|
const depthMapExt = depthMapParams.filename.slice(
|
|
depthMapParams.filename.lastIndexOf('.') + 1
|
|
)
|
|
|
|
if (
|
|
depthMapExt === 'png' ||
|
|
depthMapExt === 'jpg' ||
|
|
depthMapExt === 'jpeg'
|
|
) {
|
|
const depthMapLoader = new THREE.TextureLoader()
|
|
depthTexture = await depthMapLoader.loadAsync(depthMapUrl)
|
|
}
|
|
}
|
|
|
|
if (referenceTexture && depthTexture) {
|
|
const depthMaterial = new THREE.ShaderMaterial({
|
|
uniforms: {
|
|
referenceTexture: { value: referenceTexture },
|
|
depthTexture: { value: depthTexture },
|
|
depthScale: { value: 5.0 },
|
|
ambientLightColor: { value: new THREE.Color(0.2, 0.2, 0.2) },
|
|
lightPosition: { value: new THREE.Vector3(2, 2, 2) },
|
|
lightColor: { value: new THREE.Color(1, 1, 1) },
|
|
lightIntensity: { value: 1.0 },
|
|
shininess: { value: 30 }
|
|
},
|
|
vertexShader: `
|
|
uniform sampler2D depthTexture;
|
|
uniform float depthScale;
|
|
|
|
varying vec2 vUv;
|
|
varying float vDepth;
|
|
varying vec3 vNormal;
|
|
varying vec3 vViewPosition;
|
|
|
|
void main() {
|
|
vUv = uv;
|
|
|
|
float depth = texture2D(depthTexture, uv).r;
|
|
vec3 displacement = normal * depth * depthScale;
|
|
vec3 displacedPosition = position + displacement;
|
|
|
|
vec4 worldPosition = modelMatrix * vec4(displacedPosition, 1.0);
|
|
vNormal = normalize(normalMatrix * normal);
|
|
vViewPosition = (viewMatrix * worldPosition).xyz;
|
|
|
|
gl_Position = projectionMatrix * viewMatrix * worldPosition;
|
|
|
|
vDepth = depth;
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
uniform sampler2D referenceTexture;
|
|
|
|
varying vec2 vUv;
|
|
varying float vDepth;
|
|
|
|
void main() {
|
|
vec4 referenceColor = texture2D(referenceTexture, vUv);
|
|
|
|
// Directly use reference color without fog
|
|
gl_FragColor = referenceColor;
|
|
}
|
|
`
|
|
})
|
|
|
|
const planeGeometry = new THREE.PlaneGeometry(
|
|
imageWidth,
|
|
imageHeight,
|
|
200,
|
|
200
|
|
)
|
|
const depthMesh = new THREE.Mesh(planeGeometry, depthMaterial)
|
|
scene.add(depthMesh)
|
|
}
|
|
|
|
needUpdate = true
|
|
|
|
scene.add(ambientLight)
|
|
scene.add(camera)
|
|
|
|
progressDialog?.close()
|
|
|
|
frameUpdate()
|
|
}
|
|
|
|
document
|
|
.getElementById('screenshotButton')
|
|
?.addEventListener('click', takeScreenshot)
|
|
|
|
const sleep = (t = 1000) => {
|
|
return new Promise((res, rej) => {
|
|
setTimeout(() => res(1), t)
|
|
})
|
|
}
|
|
|
|
// 方法：旋转摄像机并拍摄图片 // 每次旋转的角度增量，转换为弧度
|
|
async function captureImages (
|
|
totalFrames = 20,
|
|
angleIncrement = 1.5,
|
|
scaleFactor = 1 // 添加放大倍数参数，默认为1
|
|
) {
|
|
angleIncrement = THREE.MathUtils.degToRad(angleIncrement)
|
|
|
|
// 计算场景中所有物体的中心点
|
|
const box = new THREE.Box3().setFromObject(scene)
|
|
const center = new THREE.Vector3()
|
|
box.getCenter(center)
|
|
|
|
// 计算当前相机距离中心点的半径
|
|
const radius = camera.position.distanceTo(center)
|
|
|
|
// 存储图片的数组
|
|
let images = []
|
|
|
|
// 记录初始相机位置和朝向
|
|
const initialPosition = camera.position.clone()
|
|
const initialTarget = center.clone()
|
|
|
|
// 计算当前相机的初始角度
|
|
const initialAngle = Math.atan2(
|
|
camera.position.z - center.z,
|
|
camera.position.x - center.x
|
|
)
|
|
|
|
// 起始角度为从当前角度往左旋转 20 度的位置
|
|
const startAngle = initialAngle
|
|
// - (angleIncrement * totalFrames) / 2
|
|
|
|
// 保存原始尺寸
|
|
const originalWidth = renderer.domElement.width
|
|
const originalHeight = renderer.domElement.height
|
|
|
|
// 调整渲染器尺寸
|
|
renderer.setSize(
|
|
originalWidth * scaleFactor,
|
|
originalHeight * scaleFactor,
|
|
false
|
|
)
|
|
|
|
// 调整相机的视图矩阵（如果需要）
|
|
camera.aspect = (originalWidth * scaleFactor) / (originalHeight * scaleFactor)
|
|
camera.updateProjectionMatrix()
|
|
|
|
for (let i = 0; i < totalFrames; i++) {
|
|
const angle = startAngle + i * angleIncrement
|
|
|
|
// 计算相机的位置
|
|
camera.position.x = center.x + radius * Math.cos(angle)
|
|
camera.position.z = center.z + radius * Math.sin(angle)
|
|
camera.position.y = initialPosition.y // 保持相机高度不变
|
|
camera.lookAt(center) // 相机看向中心点
|
|
|
|
// 渲染当前帧
|
|
renderer.render(scene, camera)
|
|
|
|
// 将当前帧保存为图片
|
|
const imgData = renderer.domElement.toDataURL('image/png')
|
|
images.push(imgData)
|
|
|
|
// 等待一段时间
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
}
|
|
|
|
// 恢复渲染器尺寸
|
|
renderer.setSize(originalWidth, originalHeight, false)
|
|
|
|
// 恢复相机的视图矩阵
|
|
camera.aspect = originalWidth / originalHeight
|
|
camera.updateProjectionMatrix()
|
|
|
|
// 恢复相机到初始位置和朝向
|
|
camera.position.copy(initialPosition)
|
|
camera.lookAt(initialTarget)
|
|
|
|
return images
|
|
}
|
|
|
|
async function takeScreenshot () {
|
|
// 更新相机的矩阵，以确保其世界矩阵是最新的
|
|
camera.updateMatrixWorld()
|
|
const imgs = await captureImages(12,3,4)
|
|
|
|
// 获取当前网页的 URL
|
|
const currentUrl = window.location.href
|
|
|
|
// 创建一个 URL 对象
|
|
const url = new URL(currentUrl)
|
|
|
|
// 使用 URLSearchParams 获取参数
|
|
const params = new URLSearchParams(url.search)
|
|
|
|
// 获取参数 'id' 的值
|
|
const id = params.get('id')
|
|
|
|
window.parent.postMessage({ imgs, id }, '*')
|
|
}
|
|
|
|
main()
|
|
|
|
window.addEventListener('message', event => {
|
|
// 这里可以添加对来源的验证，以确保安全
|
|
// console.log('Message received from parent page:', event.data)
|
|
let { reference_image, depth_map } = event.data
|
|
if (reference_image && depth_map) {
|
|
visualizer?.setAttribute('reference_image', JSON.stringify(reference_image))
|
|
visualizer?.setAttribute('depth_map', JSON.stringify(depth_map))
|
|
frameUpdate()
|
|
}
|
|
})
|