Create a kind of fog around model

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 ! :smiley: )

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()

    
  }

Hi!
Just for an idea, have a look at this topic and its latest codepen with the final result: A fish of splines
There is no fog in the scene at all, just the color of the grass (which is a distorted/bended plane) fades out to the color of the background. That’s the trick :slight_smile:

Wow, that was so easy !
If I take my case, I just needed to take an alpha map !
That’s right ?

Thank you so much @prisoner849 !

Sounds like an option :slight_smile: