我正在尝试使用 THREEJS 模块在链接中制作场景。但我做不到。如何将js文件转换为模块并导入？我不想像在演示中那样通过将 js 文件添加到 html 页面来使用它。
https://github.com/BOXNYC/Three.js-Extras/tree/main/Hologram
演示：https ://threee.box.biz/hologram/
网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Hollogram.js - Three.js</title>
<style>
* {
margin: 0;
padding: 0;
}
video {
position: fixed;
transform: scale(0.25);
transform-origin: 0 0;
background-color: rgba(0,0,0,0.15)
}
</style>
</head>
<body>
<video id="video" playsinline webkit-playsinline muted loop autoplay crossorigin="anonymous" width="1024" height="512" src="~/GreenScreenDemo/video/dance.mp4"></video>
<style>
#form {
position: fixed;
top: 0;
right: 0;
text-align: right;
padding: 15px;
}
#form label {
display: block;
}
#form label input {
}
textarea {
display: block;
width: calc(100% - 60px);
margin: 15px;
padding: 15px;
position: fixed;
bottom: 0;
left: 0;
border: none;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
#form label span {
display: block;
}
#form label span::after {
content: attr(data-value);
margin-left: 10px;
color: white;
}
#src input {
border: navajowhite;
font-size: 14px;
text-align: right;
background-color: transparent;
}
#src {
border-radius: 40px;
padding: 2px 13px;
font-size: 16px;
margin: 14px 0;
border: 2px solid white;
}
</style>
<div id="form">
<label id="src">URL <input type="text" value="dance.mp4" /></label>
<label id="chromaKey"><span data-value="#14ff0b">ChromaKey</span> <input type="color" value="#14ff0b" /></label>
<label id="chromaRange"><span data-value="0.616">ChromaRange</span> <input type="range" min="0.00" max="1.0" step="0.001" value="0.616" /></label>
<label id="feetOffset.x"><span data-value="-0.107">Foot offset x</span> <input type="range" min="-1.0" max="1.0" step="0.001" value="-0.107" /></label>
<label id="feetOffset.y"><span data-value="0.054">Foot offset y</span> <input type="range" min="-1.0" max="1.0" step="0.001" value="0.054" /></label>
<label id="sillouetteShadowOpacity"><span data-value="0.143">Shadow Opacity</span> <input type="range" min="0.0" max="1.0" step="0.001" value="0.143" /></label>
<label id="sillouetteShadowHeight"><span data-value="-0.679">Shadow Height</span> <input type="range" min="-1.0" max="1.0" step="0.001" value="-0.679" /></label>
<label id="sillouetteShadowSkew"><span data-value="-0.464">Shadow Skew</span> <input type="range" min="-1.0" max="1.0" step="0.001" value="-0.464" /></label>
</div>
<textarea id="output" spellcheck="false"></textarea>
<script type="module" src="~/GreenScreenDemo/js/shrm.js"></script>
</body>
</html>
shrm.js 文件：
import * as THREE from '../lib/three.module.min.js';
import { Hologram } from '../hologram/greenscreen.js';
init();
function init() {
var scene = new THREE.Scene();
scene.background = new THREE.Color('pink');
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 1
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
var resize = () => {
var DPR = window.devicePixelRatio
renderer.setPixelRatio(Math.min(2, DPR))
var newWidth = window.innerWidth
var newHeight = window.innerHeight
renderer.setSize(newWidth, newHeight)
camera.aspect = newWidth / newHeight
camera.updateProjectionMatrix()
}
window.onresize = resize
document.body.appendChild(renderer.domElement);
resize()
var videoEl = document.getElementById('video');
let hologramSettings = {
sillouetteShadow: true,
chromaKey: "#14ff0b",
chromaRange: 0.616,
feetOffset: new THREE.Vector2(-0.107, 0.054),
sillouetteShadowOpacity: 0.143,
sillouetteShadowHeight: -0.679,
sillouetteShadowSkew: -0.464
}
window.hologram = new Hologram({ video: videoEl, options: hologramSettings });
scene.add(window.hologram);
var animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
requestAnimationFrame(animate);
window.scene = scene
window.camera = camera
scene.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(-0.1, 0, 0),
new THREE.Vector3(0.1, 0, 0)
]), new THREE.LineBasicMaterial({ color: 'red' })));
scene.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(0, -0.1, 0),
new THREE.Vector3(0, 0.1, 0)
]), new THREE.LineBasicMaterial({ color: 'green' })));
scene.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3(0, 0, -0.1),
new THREE.Vector3(0, 0, 0.1)
]), new THREE.LineBasicMaterial({ color: 'blue' })));
window.addEventListener('DOMContentLoaded', form, false);
}
function form() {
const $form = document.getElementById('form'),
$output = document.getElementById('output'),
output = { sillouetteShadow: true },
inputChanged = (e, manual) => {
const $input = e.target || e
const $label = $input.parentNode
const $span = $label.querySelector('span')
const key = $label.id
output[key] = $input.type == 'range' ? parseFloat($input.value) : $input.value
if (output["src"] && output["src"].match(/^.*\.mp4$/)) {
const $video = document.getElementById('video')
if ($video.getAttribute('src') != output["src"]) {
$video.removeAttribute('poster')
$video.setAttribute('src', output["src"])
window.hologram.dispose()
hologramSettings.chromaKey = output.chromaKey
hologramSettings.chromaRange = output.chromaRange
hologramSettings.feetOffset = new THREE.Vector2(output['"feetOffset.x"'], output['"feetOffset.y"'])
hologramSettings.sillouetteShadowHeight = output.sillouetteShadowHeight
hologramSettings.sillouetteShadowOpacity = output.sillouetteShadowOpacity
hologramSettings.sillouetteShadowSkew = output.sillouetteShadowSkew
window.hologram = new THREE.Hologram(videoEl, hologramSettings);
scene.add(window.hologram);
}
}
delete output["src"]
$output.value = JSON.stringify(output, null, 2)
$output.value = $output.value.replace(/\"feetOffset\.x\"\:\s*[\-0-9\.]{1,}\,\s*\"feetOffset\.y\"\:\s*[\-0-9\.]{1,}/g, '"feetOffset": new THREE.Vector2(' + output['feetOffset.x'] + ', ' + output['feetOffset.y'] + ')').replace(/ \"/g, ' ').replace(/\"\:/g, ':')
$output.rows = $output.value.split(/\n/).length
if (!manual) {
if ($span && $span.hasAttribute('data-value')) $span.setAttribute('data-value', $input.value)
if (key == 'feetOffset.x' || key == 'feetOffset.y') {
hologram.feetOffset = new THREE.Vector2(output['feetOffset.x'], output['feetOffset.y'])
} else {
hologram[key] = output[key]
}
}
}
$form.querySelectorAll('input').forEach($input => {
inputChanged($input, true)
$input.addEventListener('change', inputChanged, false)
$input.addEventListener('input', inputChanged, false)
})
}