Javascript THREE.js-在画布上绘制简单的x、y坐标_Javascript_Three.js_Html5 Canvas_Data Visualization

Javascript THREE.js-在画布上绘制简单的x、y坐标

javascript three.js html5-canvas

Javascript THREE.js-在画布上绘制简单的x、y坐标,javascript,three.js,html5-canvas,data-visualization,Javascript,Three.js,Html5 Canvas,Data Visualization,我有一个简单的HTML5页面，安装了最新版本的THREE.js。我的目标是在画布上绘制10个简单的x，y坐标。请参阅下面的代码。我希望有以下几点。我做出以下假设，因为我找不到任何相反的情况：- THREE.js将从画布的左上角以THREE.Vector2（）soTHREE.Vector2（100100）中指定的像素数打印。Vector2（100100）将从左上角打印100px和100px 点数为1px宽x 1px高所有点都将为白色我收到一张黑色帆布，我被难住了。没有控制台错误，也没有关于

我有一个简单的HTML5页面，安装了最新版本的THREE.js。我的目标是在画布上绘制10个简单的x，y坐标。请参阅下面的代码。我希望有以下几点。我做出以下假设，因为我找不到任何相反的情况：-

THREE.js将从画布的左上角以
```
THREE.Vector2（）
```
so
```
THREE.Vector2（100100）
```
中指定的像素数打印。Vector2（100100）将从左上角打印100px和100px
点数为1px宽x 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>`


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//这将在场景背景中添加星光场
var geometry=new THREE.geometry（）；
对于（变量i=0；i<10；i++）{
var star=新的三矢量2（100*i，100*i）；
几何。顶点。推（星型）；
}
var material=新的三点材质（{color:0xFFFFFF}）；
var数据=新的三个点（几何、材料）；
场景。添加（数据）；
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；
`

奖励点数，有没有办法指定所画点数的大小

提前谢谢

您的第一个假设是错误的，三维空间中设置在

（100100）

的向量并不意味着二维空间中距离顶部和左侧100px的点。如果要在画布上使用严格的

x，y

像素位置绘制简单的2D网格，我建议您使用2D画布上下文，而不是使用Three.js。3D引擎使用无单位值，这些值与HTML/CSS使用的方式不同，不遵循像素尺寸。根据相机投影、窗口纵横比、变焦、视野等，它们的位置可能会有很大的变化。您的第一个假设是错误的，3D空间中设置在

（100100）

的向量并不意味着2D空间中距离顶部和左侧100px的点。如果要在画布上使用严格的

x，y

像素位置绘制简单的2D网格，我建议您使用2D画布上下文，而不是使用Three.js。3D引擎使用无单位值，这些值与HTML/CSS使用的方式不同，不遵循像素尺寸。它们的位置可以根据相机投影、窗口纵横比、变焦、视野等而变化很大。