threejs logo

//main.js

import './style.css'

import { THREEx } from './threex.js'

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { SpotLight } from 'three';

import {

  GodRaysEffect, BloomEffect, BlendFunction, KernelSize,

  SMAAEffect, EffectComposer, EffectPass, RenderPass

} from 'postprocessing';

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';

import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

// Setup

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);

const renderer = new THREE.WebGLRenderer({

  canvas: document.querySelector('#bg'),

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

camera.position.set(0, 50, 200);

THREEx.WindowResize(renderer, camera)

const spotLight = new THREE.SpotLight(0xffffff, 2);

spotLight.position.set(600, 200, 50);

const ambientLight = new THREE.AmbientLight(0xaaaaaa);

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xaaaaaa);

directionalLight.position.set(0, 1, 1);

scene.add(directionalLight)

const controls = new OrbitControls(camera, renderer.domElement);

const fontLoader = new FontLoader();

fontLoader.load('Impact_Regular.json', function (font) {

  const geometrySetting = {

    font: font,

    size: 40,

    height: 5,

    curveSegments: 20,

    bevelEnabled: true,

    bevelThickness: 1,

    bevelSize: 0.5,

    bevelOffset: 0,

    bevelSegments: 20

  }

  const textGeoGame = new TextGeometry('Game', geometrySetting);

  const textGeoStop = new TextGeometry('Stop', geometrySetting);

  const textMatGame = new THREE.MeshLambertMaterial({ color: 0xcccccc });

  const textMatStop = new THREE.MeshLambertMaterial({ color: 0xce2121 });

  const textGame = new THREE.Mesh(textGeoGame, textMatGame);

  const textStop = new THREE.Mesh(textGeoStop, textMatStop);

  textGame.position.set(-100, 0, 20);

  textStop.position.set(30, 0, 20);

  scene.add(textGame);

  scene.add(textStop);

})

const spaceTexture = new THREE.TextureLoader().load('space.jpg');

scene.background = spaceTexture;

// Instantiate a loader

const gltfLoader = new GLTFLoader();

gltfLoader.load('moon/scene.gltf', function (gltf) {

  const moon = gltf.scene;

  moon.scale.set(0.1, 0.1, 0.1)

  moon.position.set(0, 0, 0)

  scene.add(moon)

}, undefined, function (error) {

  console.error(error);

});

gltfLoader.load('rocket/scene.gltf', function (gltf) {

  const rocket = gltf.scene;

  rocket.scale.set(200, 200, 200)

  rocket.position.set(0, -16, -30)

  scene.add(rocket)

}, undefined, function (error) {

  console.error(error);

});

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}

animate()

reference:

https://www.youtube.com/watch?v=zbHgpzrcm1o&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM&index=15

generate font.json

https://gero3.github.io/facetype.js/

impact regular font

https://www.dafontfree.net/impact-regular/f129612.htm