THREE.js - нанесение простой координаты x, y на холст - PullRequest
Новая
       52

THREE.js - нанесение простой координаты x, y на холст

1 голос
/ 24 сентября 2019

У меня есть простая страница HTML5 с последней установленной версией THREE.js.Моя цель - нарисовать 10 простых координат x, y на холсте.Смотрите код ниже.Я надеюсь на следующее.Я делаю следующие предположения, так как ничего не могу найти наоборот: -

  • THREE.js будет отображаться в левом верхнем углу холста в количестве пикселей, указанном в THREE.Vector2(), поэтому THREE.Vector2(100,100) построит 100px вправо и 100px вниз от верхнего левого угла.
  • Точки будут иметь ширину 1px и высоту 1px.
  • Все точки будут белыми.

Я получаю черный холст, и я в тупике.Нет ошибок консоли и нет отзывов о том, что я делаю неправильно.Кто-нибудь может посоветовать? 

<!DOCTYPE html>
<head>

</head>
<body>

<script src="https://threejs.org/build/three.js" type="text/javascript">    </script>
<script type="text/javascript">
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);

//This will add a starfield to the background of a scene
var geometry = new THREE.Geometry();

for ( var i = 0; i < 10; i++) {
    var star = new THREE.Vector2(100*i,100*i);
    geometry.vertices.push(star);
}

var material = new THREE.PointsMaterial({ color: 0xFFFFFF });

var data = new THREE.Points(geometry, material);

scene.add(data);

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();
</script>
</body>`

Бонусная точка, есть ли способ указать размер нарисованной точки?

Заранее спасибо!

...