JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://threejs.org/build/three.module.js';
import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
import {
GUI
} from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
import {
OrbitControls
} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import {
Line2
} from 'https://threejs.org/examples/jsm/lines/Line2.js';
import {
LineMaterial
} from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
import {
LineGeometry
} from 'https://threejs.org/examples/jsm/lines/LineGeometry.js';
import {
GeometryUtils
} from 'https://threejs.org/examples/jsm/utils/GeometryUtils.js';
// Question Reference: discourse.threejs.org/t/how-to-draw-line-in-diffrent-parent/20839
let three = {
scene: null,
camera: null,
renderer: null,
orbitcontrols: null,
dragcontrols: null,
}
let dicLayer = [];
let matLine;
initThreeJS();
initLayers();
createObject();
animate();
function initThreeJS() {
three.scene = new THREE.Scene();
three.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
10000
);
three.renderer = new THREE.WebGLRenderer();
three.renderer.setSize(window.innerWidth, window.innerHeight);
three.camera.position.z = 5000;
three.camera.position.y = 2000;
three.orbitcontrols = new OrbitControls(three.camera, three.renderer.domElement);
document.body.appendChild(three.renderer.domElement);
}
function initLayers() {
for (let i = 0; i < 3; i++) {
const geometry = new THREE.BoxGeometry(200, 10, 200);
const material = new THREE.MeshBasicMaterial({
color: 0x316da8,
opacity: 0.5,
transparent: true
});
const cylinder = new THREE.Mesh(geometry, material);
cylinder.name = `${i + 1} Layer`;
dicLayer[cylinder.name] = cylinder;
cylinder.scale.set(20, 20, 20);
cylinder.position.set(0, 1000 * i, 0);
three.scene.add(cylinder);
}
}
function createObject() {
for (const...