コード

qiita.html


<html>
  <head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
  </head>
  <body>
    <script src="../build/three.js"></script>
<script>

var cube;
var renderer;
var scean;
var camera;



Init();

function Init(){



    const far = 2000;
    const w = window.innerWidth/10;
    const h = window.innerHeight/10;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, far);
    camera.position.z = 0;
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BufferGeometry();



var vertexPositions = [
    [-10.0, -10.0, 10.0], 
    [ 10.0, -10.0, 10.0], 
    [ 10.0,  10.0, 10.0], 
    [-10.0,  10.0, 10.0] 
];

var vertices = new Float32Array(vertexPositions.length * 3);
for (var i = 0; i < vertexPositions.length; i++) {
    vertices[i * 3 + 0] = vertexPositions[i][0];
    vertices[i * 3 + 1] = vertexPositions[i][1];
    vertices[i * 3 + 2] = vertexPositions[i][2];
}

var indices = new Uint16Array([
    0, 1, 2,
    2, 3, 0
]);

geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('index',    new THREE.BufferAttribute(indices,  1));

const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0,0,0);

mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
scene.add(mesh);


for(var i =0; i<vertexPositions.length; i++ ){
const geometry = new THREE.PlaneBufferGeometry( 1, 1 );
  const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  const plane = new THREE.Mesh( geometry, material );
  plane.position.x = vertexPositions[i][0];
  plane.position.y = vertexPositions[i][1];
  plane.position.z = vertexPositions[i][2];
  scene.add( plane );   
}


camera.position.z = +50;

};


const render = function () {
  requestAnimationFrame( render );

  renderer.render(scene, camera);
};

render();


</script>

  </body>
  </body>

緑色の正方形を作って、その周りに赤い長方形をうってます。

やってることは、簡単で、上でつくった緑いろのジオメトリの頂点の座標データを赤い長方形に渡しているだけです。

早く続きが描きたい。

three.jsで特定のオブジェクトの頂点にオブジェクトを配置する。

コード