Why THREE.Geometry() not working?

Questions
, ,
1

I tried to draw a couple of two-dimensional squares, but for some reason the code did not start. Perhaps this is due to the fact that I used the old version and now they write in a different way.

//--------------Создаем объект-------------------
	var osxyGeometry = new THREE.Geometry();//Производная фигура
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
	var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
	var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxy);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osyzGeometry = new THREE.Geometry();//Производная фигура
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
	var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
	var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osyz);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osxzGeometry = new THREE.Geometry();//Производная фигура
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
	var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
	var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxz);//Добавляем объект на сцену

all code

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - orbit controls</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #ccc;
				color: #000;
			}

			a {
				color: #f00;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			let camera, controls, scene, renderer;

			init();
			//render(); // remove when using next line for animation loop (requestAnimationFrame)
			animate();

			function init() {

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xcccccc );
				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setClearColor(new THREE.Color(0x497580)); // поставмл пока серо-синий фон
                renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 400, 200, 0 );

				// controls

				controls = new OrbitControls( camera, renderer.domElement );
				controls.listenToKeyEvents( window ); // optional

				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				controls.dampingFactor = 0.05;

				controls.screenSpacePanning = false;

				controls.minDistance = 100;
				controls.maxDistance = 500;

				controls.maxPolarAngle = Math.PI / 2;

				// world
				     // рисую квадраты осей 
	
	//--------------Создаем объект-------------------
	var osxyGeometry = new THREE.Geometry();//Производная фигура
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));//Указываем вектор первой точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, 10, 0));//Указываем вектор второй точки
	osxyGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
	osxyGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
	var osxyMaterial = new THREE.LineBasicMaterial({color:0x7457bd, linewidth:1});
	var osxy = new THREE.Line(osxyGeometry, osxyMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxy);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osyzGeometry = new THREE.Geometry();//Производная фигура
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));//Указываем вектор первой точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, 10));//Указываем вектор второй точки
	osyzGeometry.vertices.push(new THREE.Vector3(0, 10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, -10));
	osyzGeometry.vertices.push(new THREE.Vector3(0, -10, 10));
	var osyzMaterial = new THREE.LineBasicMaterial({color:0x3d803d, linewidth:1});
	var osyz = new THREE.Line(osyzGeometry, osyzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osyz);//Добавляем объект на сцену
	
	//--------------Создаем объект-------------------
	var osxzGeometry = new THREE.Geometry();//Производная фигура
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));//Указываем вектор первой точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, 10));//Указываем вектор второй точки
	osxzGeometry.vertices.push(new THREE.Vector3(10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, -10));
	osxzGeometry.vertices.push(new THREE.Vector3(-10, 0, 10));
	var osxzMaterial = new THREE.LineBasicMaterial({color:0xab5641, linewidth:1});
	var osxz = new THREE.Line(osxzGeometry, osxzMaterial);//Создаем линию из созданной геометрии
	
	//--------------Добавление вывод-----------------
	scene.add(osxz);//Добавляем объект на сцену
	
				// lights

				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
				dirLight1.position.set( 1, 1, 1 );
				scene.add( dirLight1 );

				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
				dirLight2.position.set( - 1, - 1, - 1 );
				scene.add( dirLight2 );

				const ambientLight = new THREE.AmbientLight( 0x222222 );
				scene.add( ambientLight );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				requestAnimationFrame( animate );

				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

				render();

			}

			function render() {

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>
2

If you are using Three r125 or later, then you should use THREE.BufferGeometry

I’ve converted the first square for you.

const points = []
points.push(new THREE.Vector3(-10, 10, 0))
points.push(new THREE.Vector3(10, 10, 0))
points.push(new THREE.Vector3(10, -10, 0))
points.push(new THREE.Vector3(-10, -10, 0))
points.push(new THREE.Vector3(-10, 10, 0))
const osxyMaterial = new THREE.LineBasicMaterial({ color: 0x7457bd, linewidth: 1 })
const osxyGeometry = new THREE.BufferGeometry().setFromPoints(points)
const osxy = new THREE.Line(osxyGeometry, osxyMaterial)
scene.add(osxy)

I’ve created some example conversions here that you can use for reference.

2 Likes
3

Related:

1 Like
4

bingo :tada::tada::tada:

@Mugen87 you really should have left an empty Geometry constructor that links to that thread in the console, in fact this goes for all deprecation notices. People will not look for anything in google, but they will click links. Chromium does exactly that in their error messages, btw.

1 Like
5

We typically leave such messages in the codebase for 10 releases, or about a year. At some point they do need to be removed.

1 Like