Danetag

// Here is a simple class that contains loading methods. 
// Nothing fancy, but the idea is simply to return a Promise
import { loadImg } from './load';

class Sprite {
  
  /* 
    @Example
  
    import Sprite from './Sprite';

ayamflow

// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269

function visibleHeightAtDepth(depth, camera) {
    // compensate for cameras not positioned at z=0
    const cameraOffset = camera.position.z;
    if ( depth < cameraOffset ) depth -= cameraOffset;
    else depth += cameraOffset;
    // vertical fov in radians
    const vFOV = camera.fov * Math.PI / 180;
    // Math.abs to ensure the result is always positive

yyx990803

// This requires the WIP branch at https://github.com/vuejs/vue-loader/tree/next

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './main.js'),
  output: {
    path: path.resolve(__dirname, 'dist')

mattdesl

texture loading

A utility for loading texture in ThreeJS. Will upload to GPU as soon as the texture is loaded, ensuring that it won't cause jank later in your application.

Example:

const loadTexture = require('./loadTexture');

// Returns a THREE.Texture object

AVGP

  var ffmpeg = require('ffmpeg.js/ffmpeg-mp4.js')

  document.querySelector('button').addEventListener('click', (evt) => {
    document.querySelector('[camera]').setAttribute('animation', {
      property: 'rotation',
      to: '0 360 0',
      dur: 10000,
      easing: 'linear'
    })

evantahler

#! /usr/bin/env node
// I am ./bin/buildSitemap.js

const path = require('path')
const glob = require('glob')
const fs = require('fs')

const SITE_ROOT = process.env.SITE_ROOT || 'https://www.actionherojs.com'
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')

ayamflow

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

mattdesl

const glslify = require('glslify');
const path = require('path');

// This is the original source, we will copy + paste it for our own GLSL
// const vertexShader = THREE.ShaderChunk.meshphysical_vert;
// const fragmentShader = THREE.ShaderChunk.meshphysical_frag;

// Our custom shaders
const fragmentShader = glslify(path.resolve(__dirname, 'standard.frag'));
const vertexShader = glslify(path.resolve(__dirname, 'standard.vert'));

claus

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

mattdesl

This isn't bullet-proof but here's how I've doing things lately:

modular ThreeJS quickie

• npm install three --save
• Include this in your browserify/webpack root script, typically your index.js:

global.THREE = require('three')

• Add the "THREE" global to your linter (e.g. semistandard/eslintrc)