How to make chess

Hello

<html>
<head>
<title>My first Three.js app</title>
<style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
</style>
</head>
<body>
    <script src="library/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 );
//	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 );	  
//	const geometry = new THREE.BoxGeometry( 1, 0.2, 1 );
//	const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
//	const cube = new THREE.Mesh( geometry, material );
//	scene.add( cube );
const geometry = new THREE.BoxGeometry( 1, 0.2, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
//scene.add( cube );
for (var j = 0 ; j < 20 ; j++)
{
for (var i = 0 ; i < 20 ; i++)
{
cube.position.z=(j);
cube.position.x=(i);
cube.position.y=1;
}		  
}
scene.add( cube );
/////////////    
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );

		cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
		
renderer.render(scene, camera);
};
	render();	  
//sound	  
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
const sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sound/sound_3.ogg', function( buffer ) {
	sound.setBuffer( buffer );
	sound.setLoop( true );
	sound.setVolume( 0.5 );
	sound.play();
});
//sound_FIN
    </script>
  </body>
</html>

Error :frowning: there is an error on the screen

To receive any help, you’ll need to be more specific about the nature of the error.
Open the JavaScript Console, which you’ll find in the developer tools section of your browser.
Solve the errors that are posted there, starting with the first one.

1 Like
for (var j = 0 ; j < 20 ; j++)
{
for (var i = 0 ; i < 20 ; i++)
{
cube.position.z=(j);
cube.position.x=(i);
cube.position.y=1;
}		  
}
scene.add( cube );

Hello, welcome to the forum :wave:

Please read this post on how to ask a good question and update your post with more info so that people can help you:

1 Like

I doubt that this is the error description which the JavaScript Console gave you, but nevertheless:

So I copied your code into an html file and tried to run it “as was”.

1st error I encountered was:
ReferenceError: Can't find variable: THREE Globaler Code — test.html:16 file:///... /library/three.js

To resolve this error, you’ll need to provide the absolute or relative (to your html-file) path to the three.js file.

Once I did that, the next error was:

Failed to load resource: The requested URL could not be found on this server.

This refers to the loading of the sound resource, which I don’t need. So I commented the whole block related to sound out, like so:

/*
// create a global audio source
const sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
 audioLoader.load( 'sound/sound_3.ogg', function( buffer ) {
  sound.setBuffer( buffer );
  sound.setLoop( true );
  sound.setVolume( 0.5 );
  sound.play();
});
//sound_FIN
*/

Now the code ran, without any errors in the JavaScript Console. But still nothing to see but a black screen.

The next interesting part of your code is these two nested loops:

for (var j = 0 ; j < 20 ; j++) {
        
    for (var i = 0 ; i < 20 ; i++) {

       cube.position.z=(j);
       cube.position.x=(i);
       cube.position.y=1;
      
    }
}
                                               
scene.add( cube );

I’m not sure about what you were trying to achieve (and I won’t guess), but this is what your code did achieve:

Set the cube’s xyz positions once, then overwrite them 399 times without ever using them in between.
Finally, outside of both nested loops, you added one (1) cube at position (x, y, z) = (19, 1, 19), which is way outside of the camera frustum.

Reverting the cube.position to a constant (0, 0, 0) finally showed a spinning cube in the center of the screen.

As a general advice:
Start simple, with a running example, which you apparently did.
Then change one piece of code at a time and verify, it’s still working as intended.
If it works as intended, you can keep going.
Otherwise, if something broke, the fault has most likely been introduced with the last change you made.

Fix that right away, because chances are, this fault will not go away by pouring more complexity on top of it.

Good luck!

1 Like

no,=

const geometry = new THREE.BoxGeometry( 1, 0.2, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
for (var i = 0 ; i < (8) ; i++) 
{
for (var j = 0 ; j < (8) ; j++)
{
const cube = new THREE.Mesh( geometry, material );
cube.position.x=(2*i);
cube.position.z=(2*j);
scene.add(cube);
}
}

or =

const geometry = new THREE.BoxGeometry( 1, 0.2, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
for (var i = 0 ; i < (8) ; i++) 
{
for (var j = 0 ; j < (8) ; j++)
{
cube.position.x=(2*i);
cube.position.z=(2*j);
}
}
scene.add(cube);

I can’t understand the logic of writing code

how to make all cubes of different colors?
problem: why

const cube = new THREE.Mesh( geometry, material );
and
scene.add(cube);

when an entry exists:

var render = function () {
requestAnimationFrame( render );

	//	cube.rotation.x += 0.1;
    //    cube.rotation.y += 0.1;
		
renderer.render(scene, camera);
};
	render();

==========

	//	cube.rotation.x += 0.1;
    //    cube.rotation.y += 0.1;

Error :frowning:

example: http://sincorrer.com/

If ever there was a problem that deserves the attribute “fundamental”, this is probably one of them.

There are many good resources on the web which can assist you in learning how to program. Emphasis is on “assisting”, the actual learning is up to you.

You may want to start here for the basic concepts of programming:
https://en.wikipedia.org/wiki/Control_flow

Then maybe continue with the details of the application of such concepts in a specific language like JavaScript:
https://www.w3schools.com/js/default.asp

1 Like