這段代碼基本上顯示了一個3D文件(obj,stl,3mf),由用戶使用三個js OBJLoader,STLLoader和3MFLoader輸入。所有的工作都很好,但我嘗試了一些(在這段代碼中)添加軌道控制,以便用戶可以放大、縮小、旋轉等文件,但它似乎不起作用。控制臺沒有任何錯誤,但旋轉、放大和縮小等操作與渲染效果不一樣。
<input type="file" name="file" id="file" onchange="loadFile(event)" />
<div id="filePreview" style="width: 100%; height: 30vh"></div>
<script>
var loadFile = function (event) {
let oInput = document.getElementById("file");
var _validFileExtensions = [".obj", ".stl", ".3mf"];
function ValidateSingleInput() {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (
sFileName
.substr(
sFileName.length - sCurExtension.length,
sCurExtension.length
)
.toLowerCase() == sCurExtension.toLowerCase()
) {
window.fileUrl = URL.createObjectURL(event.target.files[0]);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
const controls = new THREE.OrbitControls( camera, renderer.domElement, scene );
camera.position.z = 200;
controls.update();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
2000
);
camera.position.z = 250;
camera.lookAt(scene.position);
controls.update();
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1).normalize();
scene.add(directionalLight);
var mesh = null;
if (sCurExtension == ".obj") {
var objLoader = new THREE.OBJLoader();
objLoader.load(window.fileUrl, function (object) {
mesh = object;
mesh.position.y = -50;
scene.add(mesh);
});
} else if (sCurExtension == ".3mf") {
var loader = new THREE.ThreeMFLoader();
loader.load(window.fileUrl, function (object) {
mesh = object;
mesh.position.y = -50;
scene.add(mesh);
});
} else if (sCurExtension == ".stl") {
var loader = new THREE.STLLoader();
loader.load(window.fileUrl, function (geometry) {
var material = new THREE.MeshPhongMaterial({
specular: 0x111111,
shininess: 200,
shading: THREE.FlatShading,
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.y = -50;
scene.add(mesh);
});
}
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(
filePreview.offsetWidth,
filePreview.offsetHeight
);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
animate();
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
filePreview.appendChild(renderer.domElement);
blnValid = true;
break;
}
}
if (!blnValid) {
alert(
"Sorry, " +
sFileName +
" is invalid, allowed extensions are: " +
_validFileExtensions.join(", ")
);
oInput.value = "";
return false;
}
}
}
return true;
}
ValidateSingleInput();
};
</script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/3MFLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
有人能檢查一下代碼并告訴我為什么它不工作以及如何修復它嗎?
OrbitControls
不是作為Three.js庫的一部分直接導出的;而是作為examples
的一部分導出。如果您使用的是捆綁程序(如WebPack),則可以按如下方式導入:
或者,如果您正在使用腳本導入,則可以使用:
然后你可以這樣使用它: