little fix
This commit is contained in:
+148
-141
@@ -1,191 +1,200 @@
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three-orbitcontrols-ts';
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from "three-orbitcontrols-ts";
|
||||
import { gsap } from "gsap";
|
||||
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer';
|
||||
import { useEffect } from 'react';
|
||||
import {
|
||||
CSS2DRenderer,
|
||||
CSS2DObject,
|
||||
} from "three/addons/renderers/CSS2DRenderer";
|
||||
import { useEffect } from "react";
|
||||
|
||||
let camera, scene, renderer, labelRenderer, currentTexture, currentMaterial;
|
||||
const ENTITY_NAME = 'sphere'
|
||||
const ENTITY_NAME = "sphere";
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function createSphere(radius, widthS, heightS, texture, material, isVisible = false){
|
||||
const sphere = new THREE.SphereGeometry(radius, widthS, heightS)
|
||||
sphere.scale( - 1, 1, 1 );
|
||||
function createSphere(
|
||||
radius,
|
||||
widthS,
|
||||
heightS,
|
||||
texture,
|
||||
material,
|
||||
isVisible = false
|
||||
) {
|
||||
const sphere = new THREE.SphereGeometry(radius, widthS, heightS);
|
||||
sphere.scale(-1, 1, 1);
|
||||
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
material.transparent = true
|
||||
material.opacity = isVisible ? 1 : 0
|
||||
material.transparent = true;
|
||||
material.opacity = isVisible ? 1 : 0;
|
||||
|
||||
const mesh = new THREE.Mesh(sphere, material)
|
||||
mesh.position.set(4.5, 2, 4.5)
|
||||
mesh.name = ENTITY_NAME
|
||||
const mesh = new THREE.Mesh(sphere, material);
|
||||
mesh.position.set(4.5, 2, 4.5);
|
||||
mesh.name = ENTITY_NAME;
|
||||
|
||||
scene.add(mesh)
|
||||
scene.add(mesh);
|
||||
}
|
||||
|
||||
function removeEntity(entityName) {
|
||||
var selectedEntity = scene.getObjectByName(entityName);
|
||||
if(selectedEntity){
|
||||
scene.remove( selectedEntity );
|
||||
}
|
||||
var selectedEntity = scene.getObjectByName(entityName);
|
||||
if (selectedEntity) {
|
||||
scene.remove(selectedEntity);
|
||||
}
|
||||
}
|
||||
|
||||
function createPoint(title, x, y, z){
|
||||
const label = document.createElement('p')
|
||||
label.textContent = title
|
||||
label.style.backgroundColor = '#fff'
|
||||
label.style.borderRadius = '50%'
|
||||
label.style.height = '60px'
|
||||
label.style.width = '60px'
|
||||
label.style.textAlign = 'center'
|
||||
label.style.pointerEvents = 'auto'
|
||||
label.style.cursor = 'pointer'
|
||||
|
||||
const cPointLabel = new CSS2DObject(label)
|
||||
cPointLabel.name = title
|
||||
scene.add(cPointLabel)
|
||||
|
||||
cPointLabel.position.set(x, y, z)
|
||||
function createPoint(title, x, y, z) {
|
||||
const label = document.createElement("p");
|
||||
label.textContent = title;
|
||||
label.style.backgroundColor = "#fff";
|
||||
label.style.borderRadius = "50%";
|
||||
label.style.height = "60px";
|
||||
label.style.width = "60px";
|
||||
label.style.textAlign = "center";
|
||||
label.style.pointerEvents = "auto";
|
||||
label.style.cursor = "pointer";
|
||||
|
||||
return label
|
||||
const cPointLabel = new CSS2DObject(label);
|
||||
cPointLabel.name = title;
|
||||
scene.add(cPointLabel);
|
||||
|
||||
cPointLabel.position.set(x, y, z);
|
||||
|
||||
return label;
|
||||
}
|
||||
|
||||
function createScene(){
|
||||
const container = document.getElementById('root');
|
||||
|
||||
scene = new THREE.Scene();
|
||||
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1100 );
|
||||
camera.position.set(5, 2, 4.5)
|
||||
function createScene() {
|
||||
const container = document.getElementById("root");
|
||||
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio( window.devicePixelRatio );
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
container.appendChild( renderer.domElement );
|
||||
|
||||
labelRenderer = new CSS2DRenderer();
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
labelRenderer.domElement.style.position = 'absolute'
|
||||
labelRenderer.domElement.style.top = '0px'
|
||||
labelRenderer.domElement.style.pointerEvents = 'none'
|
||||
container.appendChild(labelRenderer.domElement);
|
||||
scene = new THREE.Scene();
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
window.innerWidth / window.innerHeight,
|
||||
2,
|
||||
1100
|
||||
);
|
||||
camera.position.set(5, 2, 4.5);
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement)
|
||||
controls.update()
|
||||
controls.target.set(4.5, 2, 4.5)
|
||||
controls.maxPolarAngle = Math.PI / 2.1
|
||||
controls.rotateSpeed = 0.95
|
||||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
labelRenderer = new CSS2DRenderer();
|
||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||
labelRenderer.domElement.style.position = "absolute";
|
||||
labelRenderer.domElement.style.top = "0px";
|
||||
labelRenderer.domElement.style.pointerEvents = "none";
|
||||
container.appendChild(labelRenderer.domElement);
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.update();
|
||||
controls.target.set(4.5, 2, 4.5);
|
||||
controls.maxPolarAngle = Math.PI / 2.1;
|
||||
controls.rotateSpeed = 0.95;
|
||||
}
|
||||
|
||||
function init() {
|
||||
createScene()
|
||||
createScene();
|
||||
|
||||
const firstTexture = new THREE.TextureLoader().load( '/src/assets/sea.jpg' );
|
||||
const firstMaterial = new THREE.MeshBasicMaterial( { map: firstTexture } );
|
||||
const firstTexture = new THREE.TextureLoader().load("/src/assets/sea.jpg");
|
||||
const firstMaterial = new THREE.MeshBasicMaterial({ map: firstTexture });
|
||||
|
||||
const secondTexture = new THREE.TextureLoader().load( '/src/assets/podval.jpg' );
|
||||
const secondMaterial = new THREE.MeshBasicMaterial( { map: secondTexture } );
|
||||
const secondTexture = new THREE.TextureLoader().load(
|
||||
"/src/assets/podval.jpg"
|
||||
);
|
||||
const secondMaterial = new THREE.MeshBasicMaterial({ map: secondTexture });
|
||||
|
||||
const thirdTexture = new THREE.TextureLoader().load( '/src/assets/loc3.jpg' );
|
||||
const thirdMaterial = new THREE.MeshBasicMaterial( { map: thirdTexture } );
|
||||
const thirdTexture = new THREE.TextureLoader().load("/src/assets/loc3.jpg");
|
||||
const thirdMaterial = new THREE.MeshBasicMaterial({ map: thirdTexture });
|
||||
|
||||
currentTexture = firstTexture
|
||||
currentMaterial = firstMaterial
|
||||
currentTexture = firstTexture;
|
||||
currentMaterial = firstMaterial;
|
||||
|
||||
createSphere(5, 60, 40, firstTexture, firstMaterial, true);
|
||||
createSphere(5, 60, 40, firstTexture, firstMaterial, true);
|
||||
|
||||
const firstPoint = createPoint('Loc 1', 9, 2.1, 4.5)
|
||||
const secondPoint = createPoint('Loc 2', -9, 2.1, 4.5)
|
||||
const thirdPoint = createPoint('Loc 3', -12, 2.1, 11.5)
|
||||
const firstPoint = createPoint("Loc 1", 9, 2.1, 4.5);
|
||||
const secondPoint = createPoint("Loc 2", -9, 2.1, 4.5);
|
||||
const thirdPoint = createPoint("Loc 3", -12, 2.1, 11.5);
|
||||
|
||||
secondPoint.style.opacity = 0
|
||||
secondPoint.style.opacity = 0;
|
||||
|
||||
firstPoint.addEventListener('click', () => {
|
||||
const timeline = gsap.timeline()
|
||||
|
||||
createSphere(5, 60, 40, secondTexture, secondMaterial)
|
||||
|
||||
timeline
|
||||
.to(currentTexture, {opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 0
|
||||
secondPoint.style.opacity = 1
|
||||
thirdPoint.style.opacity = 1
|
||||
const timeline = gsap.timeline();
|
||||
|
||||
currentTexture = secondTexture
|
||||
currentMaterial = secondMaterial
|
||||
firstPoint.addEventListener("click", () => {
|
||||
createSphere(5, 60, 40, secondTexture, secondMaterial);
|
||||
|
||||
removeEntity(ENTITY_NAME)
|
||||
}})
|
||||
.to(secondMaterial, {opacity: 1})
|
||||
|
||||
|
||||
})
|
||||
timeline
|
||||
.to(currentTexture, {
|
||||
opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 0;
|
||||
secondPoint.style.opacity = 1;
|
||||
thirdPoint.style.opacity = 1;
|
||||
|
||||
secondPoint.addEventListener('click', () => {
|
||||
const timeline = gsap.timeline()
|
||||
|
||||
createSphere(5, 60, 40, firstTexture, firstMaterial)
|
||||
|
||||
|
||||
timeline
|
||||
.to(currentTexture, {opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 1
|
||||
secondPoint.style.opacity = 0
|
||||
thirdPoint.style.opacity = 1
|
||||
currentTexture = secondTexture;
|
||||
currentMaterial = secondMaterial;
|
||||
|
||||
currentTexture = firstTexture
|
||||
currentMaterial = firstMaterial
|
||||
removeEntity(ENTITY_NAME);
|
||||
},
|
||||
})
|
||||
.to(secondMaterial, { opacity: 1 });
|
||||
});
|
||||
|
||||
removeEntity(ENTITY_NAME)
|
||||
}})
|
||||
.to(firstMaterial, {opacity: 1})
|
||||
|
||||
|
||||
})
|
||||
secondPoint.addEventListener("click", () => {
|
||||
createSphere(5, 60, 40, firstTexture, firstMaterial);
|
||||
|
||||
thirdPoint.addEventListener('click', () => {
|
||||
const timeline = gsap.timeline()
|
||||
|
||||
createSphere(5, 60, 40, thirdTexture, thirdMaterial)
|
||||
|
||||
timeline
|
||||
.to(currentTexture, {opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 1
|
||||
secondPoint.style.opacity = 1
|
||||
thirdPoint.style.opacity = 0
|
||||
timeline
|
||||
.to(currentTexture, {
|
||||
opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 1;
|
||||
secondPoint.style.opacity = 0;
|
||||
thirdPoint.style.opacity = 1;
|
||||
|
||||
currentTexture = thirdTexture
|
||||
currentMaterial = thirdMaterial
|
||||
currentTexture = firstTexture;
|
||||
currentMaterial = firstMaterial;
|
||||
|
||||
removeEntity(ENTITY_NAME)
|
||||
}})
|
||||
.to(thirdMaterial, {opacity: 1})
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
removeEntity(ENTITY_NAME);
|
||||
},
|
||||
})
|
||||
.to(firstMaterial, { opacity: 1 });
|
||||
});
|
||||
|
||||
}
|
||||
thirdPoint.addEventListener("click", () => {
|
||||
createSphere(5, 60, 40, thirdTexture, thirdMaterial);
|
||||
|
||||
timeline
|
||||
.to(currentTexture, {
|
||||
opacity: 0,
|
||||
onComplete: () => {
|
||||
firstPoint.style.opacity = 1;
|
||||
secondPoint.style.opacity = 1;
|
||||
thirdPoint.style.opacity = 0;
|
||||
|
||||
currentTexture = thirdTexture;
|
||||
currentMaterial = thirdMaterial;
|
||||
|
||||
removeEntity(ENTITY_NAME);
|
||||
},
|
||||
})
|
||||
.to(thirdMaterial, { opacity: 1 });
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
update();
|
||||
requestAnimationFrame(animate);
|
||||
update();
|
||||
}
|
||||
|
||||
function update() {
|
||||
renderer.render( scene, camera );
|
||||
labelRenderer.render(scene, camera);
|
||||
renderer.render(scene, camera);
|
||||
labelRenderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// function App() {
|
||||
// useEffect(() => {
|
||||
// init()
|
||||
// init()
|
||||
// animate()
|
||||
// }, [])
|
||||
|
||||
@@ -194,6 +203,4 @@ function update() {
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user