I'm currently working on a Three.js project where I want to incorporate multiple points with different textures. However, I've encountered an issue with changing textures in my fragment shader. Despite setting up the scene so that points should switch between texture 0 (a cat) and texture 1 (a dog), all points are displaying the same texture:
/**
* Creating a scene object with a specific background color
**/
function getScene() {
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
return scene;
}
/**
* Setting up the camera for the scene. Camera parameters:
* [0] field of view: determines the visible portion of the scene (in degrees)
* [1] aspect ratio: defines the scene's aspect ratio in width/height
* [2] near clipping plane: objects nearer than this are culled from the scene
* [3] far clipping plane: objects farther than this are removed from the scene
**/
function getCamera() {
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 10000);
camera.position.set(0, 1, -6000);
return camera;
}
/**
* Configuring the renderer for the scene
**/
function getRenderer() {
// Create a WebGL canvas renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
// Support for retina displays
renderer.setPixelRatio(window.devicePixelRatio);
// Set the canvas size
renderer.setSize(window.innerWidth, window.innerHeight);
// Append the canvas to the DOM
document.body.appendChild(renderer.domElement);
return renderer;
}
... (continued code snippets)
html, body { width: 100%; height: 100%; background: #000; }
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; }<html>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js'></script>
<script src='https://rawgit.com/YaleDHLab/pix-plot/master/assets/js/trackball-controls.js'></script>
<script type='x-shader/x-vertex' id='vertex-shader'>
/**
* Explanation of the vertex shader...
***/
... (vertex shader code here)
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
/**
* Explanation of the fragment shader...
***/
... (fragment shader code here)
</script>
</body>
</html>I'm seeking input from the community to help me figure out what might be causing this issue. Any suggestions or insights would be greatly appreciated!