New exameple with spotlight from ThreeJS, if you use the web development tool from browser then you can see the source code.
2D, 3D, game, games, online game, game development, game engine, programming, OpenGL, Open AI, math, graphics, design, graphic, graphics, game development, game engine, programming, web development, web art, web graphic, arts, tutorial, tutorials,
Se afișează postările cu eticheta three.js. Afișați toate postările
Se afișează postările cu eticheta three.js. Afișați toate postările
miercuri, 31 ianuarie 2024
joi, 28 septembrie 2023
Tests for video rendering in its own reconstructed space.
This website will show you how to process a snowboard film in 3D space, from AlexandreDevaux twitter account.
luni, 21 august 2023
ThreeJS : Use ThreeJS into my vercel project - 001.
New changes to the old project named nextjsthreejs001, created in vercel, I added the threejs library, created a scene with a default cube object.
Posted by
Cătălin George Feștilă
Labels:
2023,
3D,
design,
github,
graphic,
graphics,
three.js,
vercel,
web development
joi, 13 iulie 2023
ThreeJS : dissolve shader example.
This example with ThreeJS and shaders is created by Made with 🐪 by Faraz Shaikh, see more on the GitHub user.
miercuri, 31 mai 2023
miercuri, 26 aprilie 2023
Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial
The three.js library can be used very well to create good content in the website development area. You can see a good example from the Fireship youtube channel posted a year ago.
Posted by
Cătălin George Feștilă
Labels:
2023,
2D,
3D,
Fireship,
three.js,
tutorial,
tutorials,
video,
video tutorial,
web development,
website,
youtube
sâmbătă, 20 august 2022
The threejs project by playdoh.
This is a beautiful website project named lagaleriedesespeces build with the Three.js library.
You can see it on this webpage.
duminică, 26 iunie 2022
Example with modified shader and threejs from the web.
I searched the web for an example with threejs and found an example created by someone else. I liked it and I modified it to look like this.
luni, 18 aprilie 2022
BVH and three.js meshes implementation.
This article is about the BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.
The full source code can be found on this GitHub project.
You can see a good example on this demo page with this Tyrannosaurus rex
Posted by
Cătălin George Feștilă
Labels:
2022,
3D,
BVH,
design,
github,
software 3D,
source code,
three.js,
tutorial,
tutorials
sâmbătă, 18 septembrie 2021
CodePen: Webcam with RGB color shader and the three.js javascript library.
Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
This library is not really used in website development. It has some great real-time information display capabilities.
Today I show you a combined example of a webcam with a simple shader set with an RGBA color.
duminică, 25 iulie 2021
News : Three.js comes with new features.
I did not follow Three.js closely so this news is older.
Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub..., see https://en.wikipedia.org/wiki/Three.js
The last relese was 20 days agom see the GitHub webpage.
You can see a FBX model with animations on this online demo.
luni, 9 iulie 2018
The ThreeNodes tool .
The ThreeNodes.js tool is a good example to see how the three.js libs can be used.
Is a good tool to create and use it, see online tool:
Is a good tool to create and use it, see online tool:
vineri, 1 decembrie 2017
The infinitown from Little Workshop digital studio .
Today I show you a great webgl city from this WebGL experiment .
Is an a procedural city that feels alive.
Used a finite grid of random city blocks and using this tools: Three.js, Blender, Unity.
All models come from SimplePoly a team from Little Workshop.
This is a digital studio specialized in WebGL experiences.
This is a screenshot with this webgl experiment:
Is an a procedural city that feels alive.
Used a finite grid of random city blocks and using this tools: Three.js, Blender, Unity.
All models come from SimplePoly a team from Little Workshop.
This is a digital studio specialized in WebGL experiences.
This is a screenshot with this webgl experiment:
joi, 27 iulie 2017
Another online editor for three.js projects.
The framework named three.js let you to create cameras, objects, lights, materials and more, and you have a choice of renderer.
The default editor of this framework can be found here.
Today I will introduce you a new editor that allows you to edit html online.
From my point of view, this new editor is a more versatile way of creating content with this framework.
You can load this new editor here, here is a screenshot:
The default editor of this framework can be found here.
Today I will introduce you a new editor that allows you to edit html online.
From my point of view, this new editor is a more versatile way of creating content with this framework.
You can load this new editor here, here is a screenshot:
Posted by
Cătălin George Feștilă
Labels:
2017,
3D,
javascript,
programming,
three.js,
tutorial,
tutorials
marți, 20 septembrie 2016
Mandelbrot with three.js .
The Mandelbrot set is the set of complex numbers c for which the function f c ( z ) = z 2 + c . - wikipedia.org
You need to download the three.js - java script from threejs webpage.
The source code is simple. Come with default HTML5 page and javascripts.
One part of this will make vertex-shader and fragment shader, both is 2D shader type.
You need the canvas tag with id="canv".
The last part of source code is make to put all into one image processing by shaders.
You can read this tutorial here.
You need to download the three.js - java script from threejs webpage.
The source code is simple. Come with default HTML5 page and javascripts.
One part of this will make vertex-shader and fragment shader, both is 2D shader type.
You need the canvas tag with id="canv".
The last part of source code is make to put all into one image processing by shaders.
You can read this tutorial here.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="three.js"></script>
</head>
<body>
<canvas id="canv" width="640" height="480"></canvas>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#define PI 3.14159
float hash( float n ) { return fract(sin(n)*753.5453123); }
#define NUM_STEPS 50
#define ZOOM_FACTOR 2.0
#define X_OFFSET 0.5
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
precision mediump int;
void main() {
vec2 z;
float x,y;
int steps;
float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
(640.0 / 480.0) - X_OFFSET;
float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;
z.x = normalizedX;
z.y = normalizedY;
for (int i=0;i<NUM_STEPS;i++) {
steps = i;
x = (z.x * z.x - z.y * z.y) + normalizedX;
y = (z.y * z.x + z.x * z.y) + normalizedY;
if((x * x + y * y) > 4.0) {
break;
}
z.x = x;
z.y = y;
}
if (steps == NUM_STEPS-1) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
}
</script>
<script type="text/javascript">
var gl;
var canvas;
var buffer;
window.onload = init;
function init() {
canvas = document.getElementById('canv');
gl = canvas.getContext('experimental-webgl');
canvas.width = 640;
canvas.height = 480;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW
);
render();
}
function render() {
window.requestAnimationFrame(render, canvas);
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
shaderScript = document.getElementById("2d-vertex-shader");
shaderSource = shaderScript.text;
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, shaderSource);
gl.compileShader(vertexShader);
shaderScript = document.getElementById("2d-fragment-shader");
shaderSource = shaderScript.text;
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, shaderSource);
gl.compileShader(fragmentShader);
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
positionLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
</body>
</html>
Posted by
Cătălin George Feștilă
Labels:
2016,
2D,
javascript,
programming,
shader,
source code,
three.js,
tutorial,
tutorials,
WebGL
Abonați-vă la:
Postări (Atom)