Hi ,
I am trying for a accident recreation using three js . I have the location (x,y,z ) information with tilt of the object . I was trying to make it with the help of tween option. It was not rotating based on the external json file.
The main idea is that I want to move the object from one point to another and it should tilt in between points.
Anyone can help me on this.?
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
var camera, scene, renderer;
var geometry, material, mesh;
var scene, camera, renderer, animate;
var controls, axis, boxGeometry, boxMaterial, box;
var red, green, blue, colors;
var red = "rgb(255,0,0)";
var blue = "rgb(0,180,280)";
var black = "rgb(0,0,0)";
var white = "rgb(255,255,255)"
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 500);
camera.position.z = 1;
scene = new THREE.Scene();
var grid = new THREE.GridHelper(1500, 1500);
var color = new THREE.Color("rgb:255,0,0");
scene.add(grid);
boxGeometry = new THREE.BoxGeometry(10, 5, 5);
boxMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors
});
red = new THREE.Color(1, 0, 0);
green = new THREE.Color(0, 1, 0);
blue = new THREE.Color(0, 0, 1);
colors = [red, green, blue];
for (var i = 0; i < 3; i++) {
boxGeometry.faces[4 * i].color = colors[i];
boxGeometry.faces[4 * i + 1].color = colors[i];
boxGeometry.faces[4 * i + 2].color = colors[i];
boxGeometry.faces[4 * i + 3].color = colors[i];
}
box = new THREE.Mesh(boxGeometry, boxMaterial);
box.rotation.x = 180;
var json = JSON.parse('{"items":{ "item_1":{ "value": "50","rotation":"100" }, "item_2":{ "value": "60","rotation":"150" }, "item_3": { "value": "70","rotation":"250" }, "item_4": { "value": "50","rotation":"300" }}}');
var rotation_arr=[0,150,250,300];
var tween = new Array();
var i=0;
for (var key in json["items"]) {
var pos = parseFloat(json["items"][key].value);
// box.rotateX(rotation);
scene.add(box);
var targetPosition_temp = new THREE.Vector3(pos, 20, 0);
// console.log(box.rotation.x);
var tween_temp = new TWEEN.Tween(box.position).to(targetPosition_temp, 1000);
tween.push(tween_temp);
if (tween.length > 1) {
tween[tween.length - 2].chain(tween[tween.length - 1]);
i++;
}
tween[0].start();
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow = true;
spotLight.position.set(15, 30, 50);
scene.add(spotLight);
camera.position.x = 90;
camera.position.y = 80;
camera.position.z = 50;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
renderer.render(scene, camera);
}