problem description
I want to implement the background effect in https://www.with.in/.
the environmental background of the problems and what methods you have tried
tried a lot of methods, currently implemented mobile, but did not figure out how to implement
related codes
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<style>
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var img = new Image();
img.src = "img/2.jpeg";
var crateTexture = new THREE.ImageUtils.loadTexture("img/2.jpeg");
let geometry = new THREE.PlaneGeometry(img.width * 2, img.height);
let material = new THREE.MeshBasicMaterial({
map: crateTexture,
});
let rect = new THREE.Mesh(geometry, material);
scene.add(rect);
camera.position.z = 500;
camera.position.y = 0;
camera.position.x = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
rect.rotation.x = -0.1;
rect.rotation.y = -0.3;
rect.rotation.z = -0.35;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
//render
render();
var position2 = {
x: 0
}
var tween2 = new TWEEN.Tween(position2);
tween2.to({
x: 200
}, 500000);
tween2.easing(TWEEN.Easing.Linear.None)
tween2.start();
animate();
tween2.onUpdate(function () {
rect.translateX(-this.x);
});
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
}
</script>
</body>
what result do you expect? What is the error message actually seen?
I want to implement the background effect in https://www.with.in/.