JSFiddle - React, Tailwind, and code Playground

by kirill321592

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(20);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
// helper
const g = new THREE.SphereGeometry(0.2);
const m = new THREE.MeshBasicMaterial({ color: 'red' });
const sphere = new THREE.Mesh(g, m);
sphere.position.set(10, -5, 0);
scene.add(sphere);

    
const geometry = new THREE.ConeGeometry( 10, 10, 4 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
cone.position.set(0,0,0);
scene.add( cone );

	for (let index = 0; index < 20; index++) {
		const point = new THREE.Vector3().fromBufferAttribute(cone.geometry.attributes.position, index);
		point.applyMatrix4(cone.matrixWorld);
    console.log(point, index);
	}
	render();
  
  function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }