I am working on some interactive landing pages that import Amazon Image Data from the Advertising API. When referencing the latest version some materials are much brighter than normal. Any thoughts on this? Thanks ![]()
<!--<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/three@0.151.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>
<script type="module">
// Set up Three.js scene
const scene = new THREE.Scene();
let meshes = [];
// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.z = 5;
// Set up the renderer
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = '0';
renderer.domElement.style.left = '0';
renderer.domElement.style.zIndex = '0';
document.body.appendChild(renderer.domElement);
// Create a loading manager
var manager = new THREE.LoadingManager();
// Set up the manager callbacks
manager.onStart = function (url, itemsLoaded, itemsTotal) {
console.log('Started loading:', url);
};
manager.onLoad = function () {
console.log('Loading complete!');
meshes.forEach(mesh => {
mesh.visible = true;
});
};
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
console.log('Loading progress:', itemsLoaded, '/', itemsTotal);
};
manager.onError = function (url) {
console.error('Error loading:', url);
};
// Set up the orbital controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Enable damping for smooth movement
controls.dampingFactor = 0.05; // Adjust damping factor for desired smoothness
controls.autoRotate = true; // Make the camera rotate sinuously around the spheres
controls.minPolarAngle = (Math.PI / 2) - (Math.PI / 180) * 30; // Minimum angle (60 degrees) - adjust as needed
// Create and add the meshes to the scene
var textureLoader = new THREE.TextureLoader();
textureLoader.load('https://m.media-amazon.com/images/I/412vqStNIjL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0823GXPZ3?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/412vqStNIjL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/41+47a4iJ8L._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0B69FZT4X?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41+47a4iJ8L._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/51KB8vehAUL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BGMZPLC5?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51KB8vehAUL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/51CFPriDKDL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BC9G1DZD?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51CFPriDKDL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/41+nZTx-bYL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B098TKRTDS?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41+nZTx-bYL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/618wrLCypSL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B08XBBG4TL?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/618wrLCypSL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/41OMu6V6IML._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BZRBP1KZ?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41OMu6V6IML._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/31NLEv05bzL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0B1ZLP332?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/31NLEv05bzL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/41Prjw-VxUL._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0BP1ZVNMB?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/41Prjw-VxUL._SL500_.jpg');
mesh.material.map = meshTexture;
});
textureLoader.load('https://m.media-amazon.com/images/I/51VXgR5Gt2L._SL500_.jpg', function (texture) {
texture.flipY = true;
var geometry = new THREE.CircleGeometry(0.75, 32);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 5 - 2.5;
mesh.position.y = Math.random() * 5 - 2.5;
mesh.position.z = Math.random() * 5 - 2.5;
mesh.rotation.y = Math.PI;
mesh.velocity = new THREE.Vector3((Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125, (Math.random() * 0.2 - 0.1) * 0.125);
mesh.userData.hrefUrl = 'https://www.amazon.com/dp/B0C3HR35SG?tag=shopthespark-20&linkCode=osi&th=1&psc=1';
scene.add(mesh);
var material = new THREE.MeshBasicMaterial({});
var meshTextureLoader = new THREE.TextureLoader(manager);
var meshTexture = meshTextureLoader.load('https://m.media-amazon.com/images/I/51VXgR5Gt2L._SL500_.jpg');
mesh.material.map = meshTexture;
});
// Animate the meshes
function animate() {
requestAnimationFrame(animate);
scene.traverse(function (node) {
if (node instanceof THREE.Mesh) {
node.position.add(node.velocity);
// Rotate the mesh back and forth in the camera's direction and rotate it by 180 degrees
var angle = Math.atan2(node.position.x - camera.position.x, node.position.z - camera.position.z);
var rotationOffset = Math.PI; // Rotate by 180 degrees
var rotationAmount = Math.sin(Date.now() * 0.0005) * 0.5; // Back and forth rotation
node.rotation.y = angle + rotationOffset + rotationAmount;
// Check boundaries and change direction if necessary
if (node.position.x < -2.5 || node.position.x > 2.5) {
node.velocity.x *= -1;
}
if (node.position.y < -2.5 || node.position.y > 2.5) {
node.velocity.y *= -1;
}
if (node.position.z < -2.5 || node.position.z > 2.5) {
node.velocity.z *= -1;
}
}
});
renderer.render(scene, camera);
controls.update();
}
animate();
</script>