Paint the chessboard

Questions
1

hi 1 how to decorate cubes with “FOR” = white and red…

<html>
<head>
<title>My first Three.js app</title>
<style>
      body { margin: 0; }
      canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/OrbitControls.js"></script>
    <script src="library/three.js"></script>	
    <script>
//	  const scene = new THREE.Scene();
//	  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
//	  const renderer = new THREE.WebGLRenderer( { antialias: true } );  
//    renderer.setSize( window.innerWidth, window.innerHeight );
//    document.body.appendChild( renderer.domElement ); 	
const scene = new THREE.Scene();
  const fov = 75;
  const aspect = 1; // the canvas default
  const near = 1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(8, 3, 20);
//const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );	

const geometry = new THREE.BoxGeometry( 1, 0.2, 1 );
//const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );



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


if (i==1 && j==1)
{
color1=0x00ff00;
}
else
{
color1=0xff0000;
}
const material = new THREE.MeshBasicMaterial( {color: color1} );



const cube = new THREE.Mesh( geometry, material );
cube.position.set(i*2,0,j*-2);


if (i==1 && j==1) 
{
 cube.name='cube001'; alert(cube.name);
}
if (i==1 && j==2) 
{
 cube.name='cube002'; alert(cube.name);
}


scene.add(cube);
}
}

/////////////    
//camera.position.set(0,0,5);		
var render = function () 
{
requestAnimationFrame( render );
//if (cube001)
//{
//Cube001.rotation.x += 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>
2

why error in code:???

var render = function () {
requestAnimationFrame( render );
if (cube001)
{
Cube001.rotation.x += 0.1;
}		
renderer.render(scene, camera);
};
render();
3

The variable cube001 is nowhere defined in your scene. Besides, variable names are case sensitive. cube001 is not the same like Cube001.

1 Like
4

It seems you are starting with javascript and three.js?

Simple examples are helpful there.

Have a look at the Collection of examples from discourse.threejs.org.

There is a BeginnerExample .

:slightly_smiling_face:

5

Leon,

on a completely unrelated note:

there’s no need to create a brand-new user for each new question.

I may be mistaken, but the code, its lack of formatting and the chess-relatedness make me feel like I’m having a deja-vue … :roll_eyes:

2 Likes
6

I don’t remember the password: (

7

delphi:

procedure TForm1.chess;
begin
//randomize;
for i := 1 to 8 do
begin
for j := 1 to 8 do
begin
MySphere[i, j] := TGLCube(GLScene_1.AddNewChild(TGLCube));

with MySphere[i, j] do
begin
Position.X := -i; // ïîçèöèÿ ïî îñè x
Position.Z := -j; // ïîçèöèÿ ïî îñè y
Scale.Y:=0.2;
if ((i xor j) and 1)=0 then  begin
//MySphere[i, j].Material.FrontProperties.Diffuse.SetColor(255,255,255,10);
MySphere[i, j].Material.FrontProperties.Emission.SetColor(255,255,255,10);
end
else begin
//MySphere[i, j].Material.FrontProperties.Diffuse.SetColor(0,0,0,100);
MySphere[i, j].Material.FrontProperties.Emission.SetColor(0,0,0,100);
end;

end;
//physic
with GetOrCreateDCEStatic(MySphere[i, j]) do
begin
Manager:=GLDCEManager1; 
BounceFactor := 0;
Friction := 1; // òðåíèå
Shape := csBox;
end;
end;
end;
end;

how to do on three

“I want to create the visual impression of an 8x8 chessboard”.
=view it from different angles / scale it / rotate it,

8

example: Example

9

Below is an example in 3d: chess - designer :unamused:

10

@leon2009 Have a look at this post: How complex is it to create a chess like grid and add object so positions (perhaps animate) - #2 by prisoner849

Is it the GLScene engine for Delphi? :slight_smile: