JSFiddle - React, Tailwind, and code Playground

by Song Xu

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>ray intersect line</title>
    <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>

  </head>

  <body>

    <canvas class="scene"></canvas>


  </body>

</html>

JavaScript

function main() {
  init();
  animate();
}

let scene, camera, renderer;
let controls;
let clock;


function init() {

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
  camera.position.z = 150;
  camera.position.y = 0;
  control3D = new THREE.TrackballControls(camera);
  control3D.rotateSpeed = 1.0;
  control3D.zoomSpeed = 1.2;
  control3D.panSpeed = 0.8;
  control3D.noZoom = false;
  control3D.noPan = false;
  control3D.staticMoving = true;
  control3D.dynamicDampingFactor = 0.3;
  control3D.target.set(0, 0, 0);
  scene = new THREE.Scene();
  let canvas = document.querySelector(".scene")
  let context = canvas.getContext('webgl2');
  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    context: context
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x777777, 0);
  //document.body.appendChild(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);
  clock = new THREE.Clock();


  var geometry = new THREE.PlaneGeometry(20, 20);
  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    //         depthTest: false,
    // depthWrite:false
  });
  var plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  var box = new THREE.Box3();
  box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(20, 20, 1));
  var helper = new THREE.Box3Helper(box, 0xffff00);
  scene.add(helper);
  
  new TWEEN.Tween(plane.position)
    .to({x:100},5000)
    .start()
    .onUpdate(function(){
        plane.updateMatrixWorld();
        box.applyMatrix4(plane.matrixWorld);
        // box.setFromCenterAndSize(plane.position, new THREE.Vector3(20, 20, 20));
    })
      // plane.updateMatrixWorld();
    // box.applyMatrix4(plane.matrixWorld);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
 ...