Develop Reference

How can I draw Letters in 3js/threeJS easily?

I have to draw letters using 3JS.
Previously I have drawed objects in Canvas with beziercurves, using a website that helped do them with the mouse.
Is there such a tool for the same job in 3JS?
I can't seem to find anything. And drawing them manually in code just seems a waste of time.
I've searched everywhere for it but nothing.
I'm using Spline Curves btw...
curve = new THREE.SplineCurve( [
new THREE.Vector2( -90, 50),
new THREE.Vector2( -150, 0),
new THREE.Vector2( -130, 50),
]);
Thanks in advance

https://threejs.org/docs/#manual/en/introduction/Creating-text
Gives different ways to draw text.
You can use TextGeometry:
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight);
camera.position.z = 10;
scene = new THREE.Scene();
var loader = new THREE.FontLoader();
loader.load('https://unpkg.com/three#0.77.0/examples/fonts/helvetiker_regular.typeface.json', function(font) {
var geometry = new THREE.TextGeometry('Hello World', {
font: font,
size: 1,
height: 1
});
geometry.center();
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r99/three.js" integrity="sha256-QlZjRhqOlDukXFfprbpsdrDQws7TtQdTGDh7F7Q3310=" crossorigin="anonymous"></script>

three.js - How to set camera position?

I'm pretty beginner in three.js and webgl programming. so I have created a box in three.js and its working fine but the problem is when I set camera position in z axis(eg: camera.position.z = 2; ) the box just disappears. could anyone explain me why is it happening and how can I properly set the position of the camera?
try uncommenting the camera.position.z = 2; in the fiddle
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
//camera.position.z = 2;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();

not sure if you're trying to create this scene with an orthographic camera or perspective camera, but you'll typically need to specify the camera by type (ie THREE.PerspectiveCamera(...)).
I also added a few extra lines to ensure the camera was configured correctly, namely, setting the "LookAt" point to (0,0,0) , as well as setting an actual position of the camera via the THREE.Vector3.set(...) method.
Here are my adjustments to your code:
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.PerspectiveCamera(70,
window.innerWidth/window.innerHeight, 0.1, 1000 ); // Specify camera type like this
camera.position.set(0,2.5,2.5); // Set position like this
camera.lookAt(new THREE.Vector3(0,0,0)); // Set look at coordinate like this
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();

Try
camera.position.set( <X> , <Y> , <Z> );
where <X> and <Z> are 2D coordinates and <Y> is height

Three.js ply colorless (all black)

I am trying to load my ply file using Three.js. It has worked but I almost don't see any colors. There are some glimpses here and there, but it's mostly black (the first image below). The image opens properly (with colors) in MeshLab (the second image below). I have tried vertexColors: THREE.VertexColors (as suggested in Three.js - ply files - why colorless?) and vertexColors: THREE.FaceColors but nothing seemed to help. I am a three.js newbie, so please tell me what am I doing wrong.
and my code:
<!doctype html>
<html lang="en">
<head>
<title>Icon 7</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/PLYLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(35, WIDTH / HEIGHT, 0.1, 100);
camera.position.set(0,0.15,3);
camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColor(0xd3d3d3, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(0,200,100);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.PLYLoader();
loader.load( './models/foot.ply', function ( geometry ) {
geometry.computeVertexNormals();
geometry.center();
var material = new THREE.MeshStandardMaterial ({ shininess: 1000,vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.castShadow = false;
mesh.receiveShadow = false;
scene.add( mesh );
} );
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.userPanSpeed = 0.05;
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
Edit: as I don't have separate textures, this is not a duplicate question.

Instead of using MeshStandardMaterial use MeshBasicMaterial

Can´t load js model in THREE JS

I have this code below and can´t seem to load the model.
loader = new THREE.JSONLoader(true);
loader.load("modelo.js" , function ( geometry, materials) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
} );
The entire code is below. If i take the out the line "loader.load(...)" it works fine and loads a small cube rotating as in the example from the tutorial in threejs.org, but when i try to load my model it doesn´t load anything. I watch a lot of examples and make this in different ways but it just doesn´t load.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
loader = new THREE.JSONLoader(true);
loader.load("modelo.js" , function ( geometry, materials) {
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );
} );
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();

Good day, I've tested your code with r61 of the Three.js library. It works fine, here's my suggestions.
First try adding a light source to your scene. If for example your background is black and you load a model (even with a texture) that is unlit, it will be black on black. So:
var ambientLight = new THREE.AmbientLight(0xBBBBBB);
scene.add(ambientLight);
If that doesn't work have a look at some of the material values in the modelo.js file specifically the colorDiffuse value in the model's json is set to black (or matches your scenes background color). Did you at anytime have this in Maya? No matter, you've said you have tried a few models so that's a long shot anyway, but if it helps check out this post:
Loading Maya model with Three.js
Next, are you running this locally? If so are you running it in Chrome and have you set the chrome.exe --allow-file-access-from-files flag. If not try it in Firefox, it should just work.
Oh also check that (a) your camera isn't too close. Maybe move it back to say:
camera.position.z = 100;
or (b) your mesh is big enough to see:
mesh.scale.set(100, 100, 100);
That should do it, good luck

How to load json models in three.js properly?

I'm having a hard time loading JSON models in three.js. I'v made a very simple tube-like model and textured it in blender. The issue is that whenever i try to load the json model in three.js, the vertexes looks weird.
I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code.
EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender?
<html>
<head>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="threejs/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.JSONLoader();
loader.load( "models/test.js", modelToScene );
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
var light = new THREE.PointLight( 0xFFFFDD );
light.position.set( -15, 10, 15 );
scene.add( light );
function modelToScene( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
obj = new THREE.Mesh( geometry, material );
obj.scale.set(1,1,1);
scene.add( obj );
}
camera.position.z = 5;
camera.position.y = 1;
var render = function () {
requestAnimationFrame(render);
obj.rotation.y += 0.01;
obj.rotation.x += 0.02;
renderer.render(scene, camera);
};
render();
</script>
</body>
any help will be appreciated.
Thanks, Jukka Korhonen

I have made some brutal mistakes exporting JSON models. For all those who'r having issues with exporting from Blender. I suggest you to check out your exporting settings.
for me, it worked with following setup;
geometry:
Vertices: check, Faces: check, normals: check, skinning: check
Materials: check all
Settings: Flip YZ: check
Animation: Morph animation
and all mehses: check