Creating common scene – Dragon3DGraff_Blog

Creating common scene


So, let’s begin.

I connected the three.js library, created an empty scene, added OrbitControls to rotate the camera, added a grid of library helpers.
I sketched about the interface as I imagined it. According to the plan, the left panel will be able to hide.
Added standard functions for creating cube and ball primitives. They are created by clicking on the corresponding buttons in the center of coordinates (which does not suit me).

TODO: make the primitive be created at the specified point. For starters, reference is implied to the main planes of the grid.

this.createCube = function (x, y, z, height, material){

			const geometry = new THREE.BoxGeometry(height, height, height, 1, 1, 1 );
			material = new THREE.MeshPhongMaterial({ color: new THREE.Color( 'lightgrey' ) });

			var cube = new THREE.Mesh(geometry, material);
			cube.position.x = x;
			cube.position.y = y;
			cube.position.z = z;

		return cube;

	this.createSphere = function ( x, y, z, radius, segments ) {

		const geometry = new THREE.SphereGeometry( radius, segments, segments,  0, Math.PI*2, 0, Math.PI );
		const material = new THREE.MeshPhongMaterial({ color: new THREE.Color('yellow')});

		let sphere = new THREE.Mesh( geometry, material );
		sphere.position.x = x;
		sphere.position.y = y;
		sphere.position.z = z;

		return sphere;

Leave a Reply

Your email address will not be published. Required fields are marked *