Background

The example I made a choice from Three.js repository is a video material. Using the material, We can import the video image into a 3D world. In this article, I will explain how I customize the example to my own idea. The key logic is a UV map for a geometry. Therefore, It may be informative at this example as well.

Background

I have been learning Three.js from a lot of examples in its repository. In this time, I pick up two examples and regenerate into new visualization. I am excited to publish my tiny demonstration. Basically, this effect comes from the following images.

My story

Recently, I have been reading examples in Three.js repository. I dedicate to comprehensive whole the code meanings. After I understand it, I customise the references into my own idea. In this post, I’m going to explain my new visualization that I hit on as a top of the image. The core logic in my code is affected from the previous post that explains an example. What I’m inspired by is the following links.

Today’s Example

I have been practising to quickly read an example code in three.js repository. The example that I have scanned is to load numerous objects with infinite repetitive animation on a particular geometric object.

Logic

The logic to animate is broadly the following procedure.

1. Set up Scene, Camera, Mesh placed on a scene
2. load flower model.
3. set up flower objects using model
4. render
 * reset and replace the flower if it has been dead
 * update scale

In this article, I will pick up how the flower object is regenerated at constant.

Get Object from Object Name

There are many flowers when launching…

Background

In my previous post, I mention to create stencil seal on the object. In that, invisible planes crop the object off. You can see the example in this site quickly as I referred to the code. This means something inside the content come out by slashing it. While learning Three.js from the example, I figured out that the resulting image looked like Japanese animation called GANTZ. You can see my inspired vision in the following official tweet.

In the above scene, a guy’s body is being cut off and it is gradually fading out. The astonishing effect got me…

Example

I have been learning of Three.js, and I would like to put forth my code with a great idea someday. Therefore I have started to read and understand by Thee.js Examples. Through this challenge, I would make progress for a creative coder.

First of all, I picked up the following example.

In this example, the originating object is cropped by invisible planes in surrounding. Besides, the cut mouth is coloured with specific colour material, magenta. They call this technic that applying materials to the cut face a stencil because the behaviour is similar to seal the content on the object…

The definition of the verb and its traits

European, American or many people except Asian people might be difficult to distinguish our face type, especially in this post, Japanese guy’s face type. We’re also confused to guess which face is from German and which look is from England and so on. The faces among European or American seem alike for us.

ソース顔 (Sauce Face)

Deep curving face

The first feature is a deep curving face between eyes that most European or American have this trait. We, Japanese people, admire such a dense appearance. Our nose is basically flat. As soon as we see foreign people, we have a bit jealous.

Tall and narrow nose

This is similar to…

Failure in my case

I was trying to post image data from local PC area as well as from Smartphone. I have been using XMLHttpRequest by adding an extra header with queries so that server-side can catch them. All is fine if I post metadata such a string, however when I have to post image data, server-side, that is PHP, could not parse the sent data. Thus, I researched how to upload image data. In this post, I’m going to expose the result of my struggling.

RequestHeader

urlencoded

First of all, I will put a couple of code below when I post metadata to server but…