JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
var 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(0x222222));
// light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
// axes
scene.add(new THREE.AxesHelper(20));
var plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), -1);
plane.normal.normalize();
var planeHelper = new THREE.PlaneHelper(plane, 10, 0xffff00);
scene.add(planeHelper);
var box = new THREE.Box3();
box.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(3, 3, 3));
var boxHelper = new THREE.Box3Helper(box, 0xff00ff);
scene.add(boxHelper);
console.log(box.intersectsPlane(plane));
}
function animate() {
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
}