JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<!-- <script src="https://threejs.org/build/three.js"></script> -->

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

new OrbitControls(camera, renderer.domElement);

var obj = new THREE.Object3D();
const s = .1;
const geometry = new THREE.BoxGeometry(s, s, s);
const material = new THREE.MeshBasicMaterial({
  color: '#ff0000',
  wireframe: true
});
const point = new THREE.Mesh(geometry, material);
obj.add(point);
scene.add(new THREE.AxesHelper(1));
scene.add(obj);


point.translateX(-1);
obj.rotateY(THREE.MathUtils.degToRad(90));
//obj.updateMatrixWorld();

const t = new THREE.Vector3(0, 0, 0);
console.log(point.localToWorld(t).round());
console.log(point.getWorldPosition(t).round());



renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
})