Untitled

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div class="app">
    <canvas id="canvas" ref="car3d"></canvas>
    <div class="inline-elements position-header-right">
      <MoleculeColorSelector v-model = "selectedColor" @activeColor = "changeCarColor"/>
    </div>
<!--    <AtomButton class="position-header-right" label="View all Deals" :onClick="changeCarColor" />-->
  </div>
</template>
<script>

import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import MoleculeColorSelector from "./MoleculeColorSelector";

export default {
  mounted() {
    this.init();
    this.renderScene();
    //this.animate();
  },
  data() {
    return {
      rotationAngle: 0,
      selectedColor: "-1",
      carModel: " Object"
    };
  },
 // components: {AtomButton},
  components: {MoleculeColorSelector},
  methods: {
    // init() {
    //     this.canvas = document.querySelector("#canvas");
    //     this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
    //     this.renderer.gammaOutput = true;
    //     this.renderer.shadowMap = true;
    //     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    //
    //     const sizes = {
    //       width: 500,
    //       height: 500,
    //     };
    //     this.renderer.setSize(sizes.width, sizes.height);
    //
    //     this.scene = new THREE.Scene();
    //     this.scene.background = new THREE.Color(0xdddddd);
    //
    //     this.camera = new THREE.PerspectiveCamera(40, sizes.width / sizes.height, 1, 100);
    //     this.camera.rotation.y = (45 / 180) * Math.PI;
    //
    //     //this.camera.position.set(0.1, 0.2, -0.3);
    //     this.camera.position.set(0.609166, 0.70933, -0.21579);
    //     this.camera.lookAt(0, 0, 0);
    //
    //     this.hlight = new THREE.AmbientLight(0x404040, 100);
    //     this.scene.add(this.hlight);
    //
    //     this.directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    //     this.directionalLight.position.set(0, 1, 0);
    //     this.directionalLight.castShadow = true;
    //     this.scene.add(this.directionalLight);
    //
    //     this.light = new THREE.PointLight(0xc4c4c4, 10);
    //     this.light.position.set(0, 300, 500);
    //     this.scene.add(this.light);
    //
    //     this.light2 = new THREE.PointLight(0xc4c4c4, 10);
    //     this.light2.position.set(500, 100, 0);
    //     this.scene.add(this.light2);
    //
    //     this.light3 = new THREE.PointLight(0xc4c4c4, 10);
    //     this.light3.position.set(0, 100, -500);
    //     this.scene.add(this.light3);
    //
    //     this.light4 = new THREE.PointLight(0xc4c4c4, 10);
    //     this.light4.position.set(-500, 300, 500);
    //     this.scene.add(this.light4);
    //
    //
    //
    //     // Create a pivot object to control the rotation
    //     this.carPivot = new THREE.Group();
    //     this.scene.add(this.carPivot);
    //
    //     const loader = new GLTFLoader();
    //     loader.load("../../../assets/car_model.glb", (glb) => {
    //     const car_model = glb.scene;
    //     console.log("car model:");
    //     console.log(car_model.children[0]);
    //
    //     const boundingBox = new THREE.Box3().setFromObject(car_model);
    //     const boundingBoxCenter = boundingBox.getCenter(new THREE.Vector3());
    //
    //     car_model.position.sub(boundingBoxCenter);
    //     car_model.scale.set(5, 5, 5);
    //     car_model.position.add(boundingBoxCenter);
    //
    //     this.carPivot.add(car_model); // Attach the model to the pivot
    //
    //     this.carModel = car_model;
    //     //this.changeCarColor("FFBE28");
    //
    //     //this.animate(); // Start the animation loop
    //   });
    // },
    init() {
      this.canvas = document.querySelector("#canvas");
      this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
      this.renderer.gammaOutput = true;
      this.renderer.shadowMap = true;
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      const sizes = {
        width: 500,
        height: 500,
      };
      this.renderer.setSize(sizes.width, sizes.height);

      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xdddddd);

      this.camera = new THREE.PerspectiveCamera(40, sizes.width / sizes.height, 1, 100);
      this.camera.rotation.y = (45 / 180) * Math.PI;

      this.camera.position.set(0.609166, 0.70933, -0.21579);
      this.camera.lookAt(0, 0, 0);

      this.hlight = new THREE.AmbientLight(0x404040, 100);
      this.scene.add(this.hlight);

      this.directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      this.directionalLight.position.set(0, 1, 0);
      this.directionalLight.castShadow = true;
      this.scene.add(this.directionalLight);

      this.light = new THREE.PointLight(0xc4c4c4, 10);
      this.light.position.set(0, 300, 500);
      this.scene.add(this.light);

      this.light2 = new THREE.PointLight(0xc4c4c4, 10);
      this.light2.position.set(500, 100, 0);
      this.scene.add(this.light2);

      this.light3 = new THREE.PointLight(0xc4c4c4, 10);
      this.light3.position.set(0, 100, -500);
      this.scene.add(this.light3);

      this.light4 = new THREE.PointLight(0xc4c4c4, 10);
      this.light4.position.set(-500, 300, 500);
      this.scene.add(this.light4);

      const loader = new GLTFLoader();
      loader.load("../../../assets/car_model.glb", (glb) => {
        const car_model = glb.scene;
        console.log("car model:");
        console.log(car_model.children[0]);

        const boundingBox = new THREE.Box3().setFromObject(car_model);
        const boundingBoxCenter = boundingBox.getCenter(new THREE.Vector3());

        car_model.position.sub(boundingBoxCenter);
        car_model.scale.set(5, 5, 5);
        car_model.position.add(boundingBoxCenter);

        this.carModel = car_model;
        this.changeCarColor("FFBE28");

        this.scene.add(car_model);

        this.animate();
      });
    },
    animate() {
      this.rotationAngle += 0.005;

      if (this.carModel) {
        const car_model = this.carModel;
        const boundingBox = new THREE.Box3().setFromObject(car_model);
        const boundingBoxCenter = boundingBox.getCenter(new THREE.Vector3());

        car_model.position.sub(boundingBoxCenter);
        car_model.rotation.y = this.rotationAngle;
        car_model.position.add(boundingBoxCenter);
      }

      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },
    changeCarColor(colorCode){
      if (this.carModel){
        let newColor = new THREE.Color("#" + colorCode);
        this.carModel.traverse((child) => {
          if (child.isMesh) {
            // Assuming the first mesh encountered is the one you want to modify
            const meshMaterial = child.material;
            if(meshMaterial.color.r> 0.2)
              meshMaterial.color.copy(newColor); // Set to red color
          }
        });
      }
    },
    renderScene() {
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  /* Always set the width and height of a canvas container */
  /*I don't actually know the width and height needed, but I'd use 100%*/
  height: 100% !important;
  width: 100% !important;
}
.position-header-right {
  position: absolute;
  right: 20px;
  top: 15px;
  max-width: 222px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
#canvas {
  width: 100%;
  height: 100%;
}
</style>