three.js ~ example ~ Mr.doob

2012-01-05 ~

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js" integrity="sha512-lIKG1kC5TMb1Zx32vdz1n31YJMZRknVY20U9MJ28hD3y2c0OKN0Ce5NhJji78v8zX5UOSsm+MTBOcJt7yMBnSg==" crossorigin="anonymous"></script>

JavaScript

let camera, scene, renderer;
let normalBox, lineTween;
let lineIndex = 0;
let time = 0;
let ratio = 0;
const clock = new THREE.Clock();
const parameter = {
	t: 0,
}
const line1Edges = [{
  x: 0,
  y: 0
}, {
  x: 0,
  y: 100
}]

const line2Edges = [{
  x: 20,
  y: 0
}, {
  x: 20,
  y: 100
}]
const lines = [
	line1Edges, line2Edges
]


window.addEventListener('click', function() {
  next();
})

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
  camera.position.set(0, 0, 300);
  camera.lookAt(0, 0, 0);
  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({
    color: "red"
  }));
  normalBox.position.set(0, 0, 0);
  normalBox.layers.set(0);
  scene.add(normalBox);

  drawPath({
    x: line1Edges[0].x,
    y: line1Edges[0].y
  }, {
    x: line1Edges[1].x,
    y: line1Edges[1].y
  }, 'path1')
  drawPath({
    x: line2Edges[0].x,
    y: line2Edges[0].y
  }, {
    x: line2Edges[1].x,
    y: line2Edges[1].y
  }, 'path2')
}

function drawPath(startPoint, endPoint, lineName) {
  const path = new THREE.Path();
  path.moveTo(startPoint.x, startPoint.y);
  path.lineTo(endPoint.x, endPoint.y);

  const points = path.getPoints();
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({
    color: 0x00ffff
  });
  const line = new THREE.Line(geometry, material);
  line.name = lineName
  scene.add(line);
}

let isYoyo = false;
function next() {
	const duration = 1000;
  let sign = 1;
  let first = true;
  if (lineTween) {
	  lineTween.stop()
  }
//  console.log('ratio', ratio)
  const startPoint = line1Edges[0]

let afterStarted = false
//  normalBox.position.set(startPoint.x, startPoint.y, startPoint.z)
	parameter.t = 0
...