Hi, newbie here. I am trying out something in three.js. There are 2 type of shapes. “squares” and a “sphere”. If user clicks the button, the corresponding shape will be added. BUT, there can only be one of each type of shape in a scene at one time (1 square and 1 sphere only). Sooo, if the user adds a new square, it will replace the old one. However, I seem to be having trouble achieving this… I can successfully add the objects but when I click another square…the square doesn’t get replaced… Please advise thanks you!
<html>
<head>
<title>My second three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<button id="button1">Square1</button>
<button id="button2">Square2</button>
<button id="button3">Sphere</button>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
loader.load( ‘square1.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
square = node;
square.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button1").addEventListener("click", function(){
scene.remove(square);
scene.add(square);
});
});
loader.load( ‘square2.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
square = node;
square.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button2").addEventListener("click", function(){
scene.remove(square);
scene.add(square);
});
});
loader.load( ‘sphere.glb’, function ( geometry ) {
geometry.scene.traverse( function ( node ) {
if ( node.isMesh ){
sphere = node;
sphere.material.map.anisotropy = maxAnisotropy;
}
document.getElementById("button3").addEventListener("click", function(){
scene.add(sphere);
});
});
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Unfortunately, I can’t share the models because I purchased them from turbosquid. They aren’t exactly “squares” and “spheres”; I just called them that to prevent confusion. I hope it’s not too much trouble I kept the app very simple.
I kept the app very simple.