JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
margin: 0;
}
canvas {
display: block;
}
JavaScript
let scene, camera, renderer,controls;
let objects=[];
//Creating Scene
scene = new THREE.Scene();
//Creating Camera
camera = new THREE.OrthographicCamera(window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / -50,0.1,1000);
camera.position.set(13,13,13);
camera.lookAt(scene.position);
//Creating renderer
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement );
controls.enableKeys = false;
document.addEventListener( 'keydown', onKeyDown );
document.addEventListener('keyup', onKeyUp);
//Adding Lights
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
function vehicle(){
var geometry2= new THREE.BoxBufferGeometry(5,5,5);
var material= new THREE.MeshBasicMaterial({color:"brown"});
var head= new THREE.Mesh(geometry2,material);
var geometry1=new THREE.BoxBufferGeometry(8,4,5);
var material1= new THREE.MeshBasicMaterial({color:"green"});
var body= new THREE.Mesh(geometry1,material1);
const geometry = head.geometry;
const positionAttribute = geometry.getAttribute( 'position' );
const vertex1 = new THREE.Vector3();
vertex1.fromBufferAttribute( positionAttribute, 0 );
head.localToWorld( vertex1 );
console.log(vertex1);
const vertex2 = new THREE.Vector3();
vertex2.fromBufferAttribute( positionAttribute, 1);
head.localToWorld( vertex2 );
console.log(vertex2);
const vertex3 = new THREE.Vector3();
vertex3.fromBufferAttribute( positionAttribute, 2 );
...