Three.js: group of geometry

Question

1.I want to combine the geometry,what should i do ? By using position? And i even want to let the group of geometry move in the scene together what should i do? By using add()?For example: the group of demond

Why my triangle failed to draw? my code: var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );

// controls
controls = new THREE.OrbitControls( camera );

// ambient
scene.add( new THREE.AmbientLight( 0x00ffff ) );

// light
var light = new THREE.DirectionalLight( 0x00ffff, 1 );
light.position.set(10, 10, 0 );
//scene.add( light );

// axes
scene.add( new THREE.AxisHelper( 20 ) );

var verticesOfTriangle1 = new THREE.Vector3(1,0,0);
var verticesOfTriangle2 = new THREE.Vector3(0,0,0.3);
var verticesOfTriangle3 = new THREE.Vector3(0,0,-0.3);
var geometry = new THREE.Triangle(verticesOfTriangle1, verticesOfTriangle2, verticesOfTriangle3);

// material
var material = new THREE.MeshPhongMaterial( {
    color: 0x00ffff, 
    shading: THREE.FlatShading,
    transparent: true,
    opacity: 0.7,
} );

// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

}

function animate() {

requestAnimationFrame( animate );

controls.update();

renderer.render( scene, camera );

the message from chrome:The error message

Amritesh Anand Amritesh Anand · Accepted Answer · 2017-05-22T07:50:56

Use THREE.Group() to combine objects and move them together.
You can use THREE.ShapeGeometry() to create a triangle. To create a mesh your geometry should inherit properties of THREE.Geometry(). Look into geometries of threejs documentation for default geometries supported.

Three.js: group of geometry

1 Answers