three.js dev template - module
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
"three/addons/": "https://unpkg.com/three/examples/jsm/"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from "three"
import { GUI } from "three/addons/libs/lil-gui.module.min.js"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
import { RGBELoader } from "three/addons/loaders/RGBELoader.js"
import { VertexNormalsHelper } from "three/addons/helpers/VertexNormalsHelper.js"
import {
getHeightArray,
get_z_splines,
get_x_splines,
} from "@jsfiddle/su2jhcq0.js"
import { hmap_x } from "@jsfiddle/go3svy75.js"
import { BufferGeometry, } from "three"
let camera, scene, renderer, controls, drag
init()
//******* HELPERS ********//
function init() {
camera = new THREE.PerspectiveCamera(
100,
window.innerWidth / window.innerHeight,
0.1,
100,
)
camera.position.set(0, 1, 5)
scene = new THREE.Scene()
scene.background = new THREE.Color(0x201919)
const gui = new GUI()
const fragmentShader = `
varying vec3 vNormal;
varying float vHeight;
uniform vec3 uGrassColor;
uniform vec3 uRockColor;
uniform vec3 uSnowColor;
uniform vec3 uSandColor;
void main(){
vec3 color = uSandColor;
color = mix(color, uGrassColor, step(0.1, vHeight));
color = mix(color, uRockColor, step(0.3,vHeight));
color = mix(color, uSnowColor, step(0.5,vHeight));
float nDotL = dot( normalize(vNormal), normalize(vec3(1.)));
gl_FragColor = vec4(color*nDotL,1.);
}
`
const vertexShader = `
varying vec3 vNormal;
varying float vHeight;
uniform float uMaxHeight;
void main(){
vNormal = normal;
vHeight = position.y/uMaxHeight;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.);
}
`
const maxH = 8
const material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms:{
uSandColor: { value: new THREE.Color('#e62861')},
uGrassColor: { value: new THREE.Color('#85d534')},
uSnowColor: { value: new THREE.Color('#FFFFFF')},
uRockColor: { value: new...