Hi everybody !
I’m here today to ask you for some recommendations about something I’m trying to do.
I created a plane with a texture of a country, and with the help of CSS3DRenderer, I achieved to place markers where I wanted to ! I’m currently using Orbit Controls for the rotation but I think I will go find some resources to use DragControls !
The idea is to click on destination to have a little resume about a travel I made.
Well, I’m pretty happy with my code so far ( Especially that I use node with gridsome, a first for me !) but I would like to add like a foggy limitation around the map, to not have a rough cut ( Sorry I don’t know if it’s the right word ! 
)
I used the fog class, but It’s not what I would like to achieve…
I would prefer something like lewahouse . It seems its like a moving texture, and when I search into the development tool I found a file called “background-noise”
So my ideas were :
- Using fog class / but not having the good result
- Create a thorus around my plane with a texture but once again, the result was not very good.
Could you help to figure what could be the best solution ?
Thank you very much for your help !
My code
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { CSS3DRenderer, CSS3DSprite, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader"
var globalPath
var loader1 = new SVGLoader()
loader1.load(
'italyHigh.svg',
function ( data ) {
const paths = data.paths
const group = new THREE.Group()
for ( let i = 0; i < paths.length; i ++ ) {
const path = paths[ i ]
globalPath = paths[0]
const material = new THREE.MeshBasicMaterial( {
color: path.color,
side: THREE.DoubleSide,
depthWrite: false
} )
const shapes = SVGLoader.createShapes( path )
for ( let j = 0; j < shapes.length; j ++ ) {
const shape = shapes[ j ]
const geometry = new THREE.ShapeGeometry( shape )
const mesh = new THREE.Mesh( geometry, material )
group.add( mesh )
}
}
// scene.add( group )
// console.log(globalPath.currentPath)
group.rotation.z = 0
group.scale.set(0.005,-0.005,0.005)
group.rotation.y=0
group.position.set(-2,2,0)
},
// loading in progress
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' )
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' )
}
)
const loader = new THREE.TextureLoader()
const height = loader.load('/heightMap.jpg')
const texture = loader.load('/texture_old.jpg')
const alpha = loader.load('/alpha1.png')
const FOG_COLOR = 0xeeeeee
// Debug
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Objects
const geometry = new THREE.PlaneBufferGeometry(3, 3, 64, 64)
const labels = []
const objects = []
// Materials
const material = new THREE.MeshStandardMaterial({
color: 'white',
map: texture,
displacementMap: height,
displacementScale: 0.1,
alphaMap: alpha,
//transparent: true
})
const plane = new THREE.Mesh(geometry, material)
scene.add(plane)
// Mesh
for (var i = 0; i < locations.length; i++) {
var element = document.createElement('div')
element.id = 'label_' + i + ' ' + locations[i].ville
element.style.width = '2px'
element.style.height = '2px'
element.style.opacity = '1'
element.style.borderRadius = '50%'
element.style.overflow = 'auto'
element.style.background = 'red'
element.style.padding = '1px'
element.style.zIndex = '90'
element.style.opacity = 0.99
element.addEventListener('click', onClick_label, false)
element.style.cursor = 'pointer'
//dragElement(element)
var domObject = new CSS3DObject(element)
domObject.position.x = locations[i].coordX
domObject.position.y = locations[i].coordY
domObject.position.z = locations[i].coordZ
domObject.rotation.x = 1
scene.add(domObject)
domObject.scale.set(0.01,0.01,0.01)
}
// Lights
const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () => {
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(600, 400, 1500)
camera.lookAt(0, 0, 0)
scene.add(camera)
/** FOG */
scene.background = new THREE.Color( FOG_COLOR )
scene.fog = new THREE.Fog( FOG_COLOR, -10, 20 )
/**
* Renderer
*/
const accueil = document.getElementById('canvas')
console.log(accueil)
const renderer1 = new THREE.WebGLRenderer()
renderer1.setSize(sizes.width, sizes.height)
renderer1.setPixelRatio(Math.min(window.devicePixelRatio, 2))
accueil.appendChild(renderer1.domElement)
// Controls
const controls = new OrbitControls(camera, renderer1.domElement )
controls.enableDamping = true
controls.keys = {
LEFT: 'ArrowLeft', //left arrow
UP: 'ArrowUp', // up arrow
RIGHT: 'ArrowRight', // right arrow
BOTTOM: 'ArrowDown' // down arrow
}
controls.minDistance = 0.6
controls.maxDistance = 2
controls.maxPolarAngle = 2.8
controls.minPolarAngle = 2
controls.maxAzimuthAngle = 0.1
controls.minAzimuthAngle = -0.1
const renderer = new CSS3DRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
// renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
accueil.appendChild(renderer.domElement)
renderer.domElement.id = 'labelName'
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () => {
const elapsedTime = clock.getElapsedTime()
const time = performance.now()
// Update objects
// Update Orbital Controls
controls.update()
// Render
renderer1.render(scene, camera)
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
function onClick_label(){
const blockRetra = document.getElementById('bloc_retract')
const blockRetra1 = document.getElementById('bloc_left')
const bloc_blanc = document.querySelector('.bloc_Blanc')
const object_ID = this.id
console.log(object_ID)
blockRetra.style.visibility = 'visible'
bloc_blanc.classList.add("translation")
blockRetra1.style.visibility = 'visible'
blockRetra1.classList.add('left-translation')
}
tick()
}
