我希望用户能够从他自己的计算机上传图像，该图像应设置为Three.js的背景图像。此图像应为静态背景。是否可以仅将图像保存在变量中？ 我当前的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>See your new car where you want it</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<input type="file" onchange="selectBackground()" multiple accept='image/*'><br>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
var scene;
var camera;
var renderer;
function selectBackground()
{
console.log("getting image");
var newBackground;
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
newBackground = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
setBackground(newBackground);
}
function setBackground(image)
{
console.log("setting background");
//init of three.js
//init Three.js
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, 0 );
//set background color to white
//scene.background = new THREE.Color(0xffffff);
//set background
scene.backgroundImage = new THREE.CanvasTexture(image);
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls( camera, renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 2;
animate();
}
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
</script>
</body>
</html>如果你能帮我解决这个问题，那就太棒了。
您需要运行此完整页面，否则很难看到结果....
var scene;
var camera;
var renderer;
function selectBackground() {
//console.log("getting image");
var newBackground;
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
//console.log("Loaded.");
newBackground = reader.result;
var img = document.createElement('img');
//preview.src =
img.src = reader.result;
var tex = new THREE.Texture(img);
tex.needsUpdate = true;
setBackground(tex);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
previewFile()
}
function setBackground(tex) {
//console.log("setting background");
//init of three.js
//init Three.js
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(10, 10, 10);
//set background color to white
//scene.background = new THREE.Color(0xffffff);
//set background
scene.background = tex; //new THREE.CanvasTexture(image);
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(800, 600); //window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 2;
animate();
}
var animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>See your new car where you want it</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="file" onchange="selectBackground()" multiple accept='image/*'><br>
<!--img id="preview">preview</img-->
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
</body>
</html>