three.js | JavaScript 3D Library | Graphics library
kandi X-RAY | three.js Summary
kandi X-RAY | three.js Summary
[NPM Package][npm]][npm-url] [Build Size][build-size]][build-size-url] [NPM Downloads][npm-downloads]][npmtrends-url] [DeepScan][deepscan]][deepscan-url]
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Creates a new WebGLRenderer object .
- Creates a WebGL instance .
- Creates a new ColorState .
- Provide strings .
- Create an instance of Loader .
- Shows object
- Viewport component .
- Refreshs all fog objects .
- Worker module .
- Handle binding states .
three.js Key Features
three.js Examples and Code Snippets
Lines of Code : 312License : Permissive (MIT)
Copy# Create a global which represents "nothing".
global nothing
# Create attributes which can be used to define the origin and destination room of a passage, which default to the above nothing.
attribute fromRoom nothing
attribute toRoom nothing
# Cre var makeapi = new Make( optionsObj );
// Executing `then` without specifying any search filters will return the first 10 makes
// that the MakeAPI's Elastic Search cluster has indexed (so in no particular order).
makeapi.then(function( err, makes ) stik.controller("CharactersCtrl", "List", function($template){
var supported, characters;
characters = $template.getElementsByClassName('character');
function clickHandler(event){
supported = event.target.getAttribute('hero');
alert(" import {
BufferAttribute,
BufferGeometry,
Color,
FileLoader,
Group,
LineBasicMaterial,
LineSegments,
Loader,
Matrix4,
Mesh,
MeshStandardMaterial,
ShaderMaterial,
UniformsLib,
UniformsUtils,
Vector3,
Ray
} from 'three';
// Special sur import {
BufferAttribute,
ClampToEdgeWrapping,
DoubleSide,
InterpolateDiscrete,
InterpolateLinear,
LinearEncoding,
LinearFilter,
LinearMipmapLinearFilter,
LinearMipmapNearestFilter,
MathUtils,
Matrix4,
MirroredRepeatWrapping,
NearestFilt import {
DataTextureLoader,
DataUtils,
FloatType,
HalfFloatType,
LinearEncoding,
LinearFilter,
RedFormat,
RGBAFormat
} from 'three';
import * as fflate from '../libs/fflate.module.js';
/**
* OpenEXR loader currently supports uncompressed, Z Map ContactData = jsonDecode(response.body);
final contacts = Contacts.fromJson(jsonDecode(a));
Person one = Person.fromJson(ContactData["one"]);
Person two = Person.fromJson(ContactData["tIFS=$'\n'
read -r -d '' content << VAR
one
two
three
{"foo":"bar"}
{"cron":"0 1 * * *"}
VAR
for line in $content; do
echo "==| ${line}"
done
while IFS= read -r line; do
printf '%s\n' "$line"
done <<'EOF'
one
two
three
{"foo":"bar"}
{cron":"0 1 * * *"}
EOF
content='one
two
three
{"foo":"bar"}
{cron":"0 1 * * *"}'
* 78f90c1 edited all three files
* 5ec87ed created three files
git restore -s @~1 -- ccc.txt
git add .
git commit -m 'restored ccc.txt'
* 75c192b (HEAD -> what) restored the third file
*Community Discussions
Trending Discussions on three.js
QUESTION
I want to implement an animation.
The animation should be a line move to another line. There will be some deformation in the process of the line moving
There is a correspondence between the points of the two lines.
How to implements it with three.js?
I try to use the tween.js.It works.
...ANSWER
Answered 2022-Mar-25 at 10:02I suggest you implement the animation of the green line with morph targets. Meaning the green line represents your default geometry whereas the blue line represents a morph target (also known as blend shape). You can then animate the transformation from green to blue by modulating the morphTargetInfluences parameter from 0 to 1.
Morph targets are part of the geometry data and defined in the BufferGeometry.morphAttributes property. Since multiple meshes can share the same geometry, the morphTargetInfluences property belongs to 3D objects like a mesh.
I suggest you study how the official example webgl_morphtargets is implemented. You can apply the same principles on lines.
QUESTION
I am trying to make a simple scene with some Three.js to experiment with it and i am currently having an unknown problem.
In the explorer console it keeps saying that Three.Scene() is not a constructor no matter if i import my download of Three or if i use the cdnjs.
...ANSWER
Answered 2022-Mar-28 at 07:49The import is not correct. It should be:
https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js
three.module.js is the ESM build file whereas three.js is UMD. If you want to use ES6 import syntax in your app, you have to use the ESM version.
QUESTION
I'm trying to learn something new in three.js. My goal is to be able to use what a second camera sees in a separate scene as a texture for the main scene. Or alternatively to be able to use what a second camera sees in the main scene as a texture. But i only see a black screen. I posted my code for it here. I hope someone recognizes where my mistake is, because I just can't figure it out.
In 3 steps:
texture = second camera view
material use texture
apply material ordinary to a mesh
see below
ANSWER
Answered 2022-Mar-23 at 02:45Are you copying this approach from a tutorial? What version of three.js are you using? I'm asking because you're using renderer.render(scene, camera, target, true); but the docs state that .render() only accepts two arguments, so passing a renderTarget doesn't do anything.
I recommend you copy the approach in this demo, you can see the source code by clicking on the < > icon. The essential part is as follows:
QUESTION
I tried to export GLTF model from Blender to Three.js. It works. But I have some artifacts on Three.js with lighting and painting. I have lines and squares in Three.js and I don't know why.
I used only Principled BSDF node in Blender to painting my model. If I set material in Three.js (MeshPhongMaterial) it works fine. But not with Principled BSDF node from Blender. Any ideas?
I'm trying to make the object cast a shadow and react to the lighting. This works well with MeshPhongMaterial and with Principled BSDF. But in the second option, I don't like these black stripes.
...ANSWER
Answered 2022-Mar-14 at 12:12The usual approach to mitigate self-shadowing artifacts is to modulate the bias property of your shadow-casting light. Try it with:
QUESTION
I'm a beginner to three.js and I'm using Angular 13 with three.js v0.137.0. I'm trying to load and preview a ply file from a data URL. When the object is rendered, it is only showing like lines as in the screenshot. screenshot - how the ply file renders.
I imported the .ply file that I'm trying to preview from the editor at https://threejs.org/editor and it loads the same .ply file perfectly. how the file renders in three.js editor
What am I doing wrong here?
...ANSWER
Answered 2022-Mar-14 at 12:10this.mesh = new THREE.Mesh(geometry, new THREE.PointsMaterial( { size: 0.01, vertexColors: true } ));
QUESTION
I'm new in Three JS and I would like to create a 3D text. I followed most of the tuto to create it, but I have an error even if I follow all the steps or copy/past the tuto's code. This is my component :
...ANSWER
Answered 2022-Feb-26 at 13:34The error means that FontLoader is not part of the core library anymore since r133. You need an additional import to use this loader in your application. Try it with:
QUESTION
With three.js, I render earth with textures. I also add an emissive texture to add the city light. But I have an issue, even the light areas of earth emit the cities light.
Exemple:
It is possible to render the emissive texture lighting only in dark areas? I don't find any ways.
My texture is set like this:
...ANSWER
Answered 2022-Feb-17 at 18:57I've been thinking about this problem after my initial comment. I think there's a solution. You could render your city lights in a separate layer after you've rendered the Earth globe. Layers let you do separate render passes with compartmentalized lights that don't affect each other.
With this in mind, instead of making the cities emissive, make them reflect a second light shining from the opposite side of the sun.
Layer 1 renders:
- Sunlight
- Sphere with Earth texture
Layer2 renders:
- Light on the opposite side of the sun
- Another sphere with cities texture
Your city material would look something like this:
QUESTION
I have a piece of code from 3 years ago that appears to not be working anymore from Three.js.
I have updated all of the other issues of the migration to ES6 for Three.js, but when I try to add as I did in the past more than 1 place marker on the planet surface, only 1 place marker is displayed, with only the last added place marker being successfully displayed in the desired position... with all other place markers being erased.
Problem example -> https://jsfiddle.net/jhL6s579/6/
Complete code:
HTML
...ANSWER
Answered 2022-Feb-17 at 11:25You have to derive your custom classes Marker and Earth in ES6 now. Meaning you have to use the class syntax like below since Object3D is now a class, too.
QUESTION
I manage a WordPress website which uses a Three.js animation on the homepage. I built this site months ago and everything had been working perfectly fine - I even showed it to someone a week ago and nothing was amiss. Yesterday, I check the site and find that Three is not loading, and that I have this in the console:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
I don't have a line or even file to reference, the error is logged coming from the first line of the root domain. I want to emphasize that I had changed absolutely nothing about the set-up. I hadn't even updated to WP 5.9 yet. This is how I had originally set things up. Sorry if it's not best practices, but I want to emphasize that it did in fact work fine. Enqueuing animation javascript file and defining its type as "module":
...ANSWER
Answered 2022-Feb-09 at 19:48I had exact same problem. I uploaded my project on Github a month ago (https://kramzin.github.io/threejs-task/) and since then didn't change a one symbol, but about a week ago it started showing same strange error in console. I found following: "Since r137 using ES6 modules like GLTFLoader in the browser requires an import map. Add the following section right below you canvas."
QUESTION
I have a weird issues with BufferGeometryUtils.mergeVertices method
I took a simple cube from a jsfiddle and performed the mergeVertices and it seems mergeVertices does not merge all identical vertices as it should. See https://jsfiddle.net/tomfree/vpdwmycn/
E.g. the vertices given in the indexGeometry returned by mergeVertices are
...ANSWER
Answered 2022-Jan-21 at 22:22The merge process is functioning as expected. If you look at the count of each attribute of the original geometry you'll get 36, but if you look at the count of each attribute of the merged indexedGeo, you'll get 24:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install three.js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
