3D text not rendering in three.js scene - javascript

The text 'Hello three.js!' is not rendering in my scene. It worked fine when I was using BoxGeometry but I seem to missing something for TextBufferGeometry.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var textGeo = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
material: 0,
extrudeMaterial: 1
} );
textGeo.computeBoundingBox();
textGeo.computeVertexNormals();
var mesh = new THREE.Mesh( textGeo, material );
scene.add(mesh);
} );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
I can't make sense of three.js documenation for TextGeometry https://threejs.org/docs/#api/geometries/TextGeometry

I needed to move the render code inside the font loader callback.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // fov, aspect, near and far
camera.position.set(-15, 0, 25);
camera.lookAt( scene.position );
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var geometry = new THREE.TextGeometry( 'Hello three.js!', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
} );

Related

Two material in the same place in three.js

I'm trying to put two materials in a plane, one over the other. I mean, I have a bricks background and over it I need to put another material whit other texture.
Use the following approach to apply more than a single material to a mesh. The idea is to define BufferGeometry.groups in a way such that the entire geometry (not just parts of it) is rendered with different materials.
var renderer, scene, camera;
init();
render();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0x000000, 0.0 );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 15, 20, 30 );
scene.add( camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.minDistance = 10;
controls.maxDistance = 50;
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
// textures
var loader = new THREE.TextureLoader();
var map = loader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png', render );
var normalMap = loader.load( 'https://threejs.org/examples/textures/decal/decal-normal.jpg', render );
var material1 = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular: 0x222222,
shininess: 100,
map: map,
normalMap: normalMap,
alphaTest: 0.5,
visible: true
} );
var material2 = new THREE.MeshNormalMaterial( {
opacity: 0.5,
transparent: true,
visible: true
} );
mesh = new THREE.Mesh( geometry, [ material1, material2 ] );
scene.add( mesh );
}
function render() {
renderer.render( scene, camera );
}
body {
margin: 0px;
}
canvs {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/examples/js/controls/OrbitControls.js"></script>

Three.js duplicates objects shape but uses new color with ColladaLoader and STLLoader

I need to load collada and STL models stored in files to the same scene. I do this with three.js framework with a standard ColladaLoader() and STLLoader() like in the linked examples.
The first object appears correctly, but the second repeats its shape in the color of the second object.
I don't understand why. Where can be the problem?
UPD
var sloader = new STLLoader();
sloader.load( 'models/m1.stl', function ( geometry ) {
var meshMaterial = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
if ( geometry.hasColors ) {
meshMaterial = new THREE.MeshPhongMaterial( { opacity: geometry.alpha, vertexColors: THREE.VertexColors } );
}
var mesh = new THREE.Mesh( geometry, meshMaterial );
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
});
var tmploader = new ColladaLoader();
tmploader.load('models/m2.dae',
function (geometry) {
var robot = geometry.scene;
var meshMaterial = new THREE.MeshPhongMaterial();
robot.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = meshMaterial;
}
});
//robot = new THREE.Mesh( geometry, meshMaterial );
scene.add(robot);
});
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( -10, 10, -10);
camera.lookAt( 0, 3, 0 );
scene = new THREE.Scene();
// lights
var light = new THREE.AmbientLight( 0x404040, 1.0 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
directionalLight.position.set( 1, 1, -1 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Rotate object around arbitrary axis in Three.js,just like the moon around the Earth.

I have tried many solutions of the question,but the object
still around his own axis without any translate.
You might want to add the object as the child of another object, and rotate that object instead...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w/h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
var b2 = mkBody(0.2,0xeeeeee)
b2.position.set(1.1,0,0)
b1.add( b2 )
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
Another option is to transform the geometry itself...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45, // Field of view
w/h, // Aspect ratio
0.1, // Near
10000 // Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
b1.updateMatrixWorld();
b1.geometry.applyMatrix(b1.matrixWorld); //Transform the actual geometry...
scene.add(b1); //Now reparent it to the scene
b1.position.set(0,0,0); //And reset its position...
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

Three.js keeps displaying the same geometry

I have a simple Three.js code that works properly in Three.js v68 but it displays 2 cubes instead of a cube and a sphere in Three.js v71. If I draw the sphere first it will draw two spheres.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var CubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var CubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( CubeGeometry, CubeMaterial );
scene.add( cube );
var spheregeometry = new THREE.SphereGeometry(1, 16, 16);
var spherematerial = new THREE.MeshBasicMaterial({ color: 0x00ff00});
var sphere = new THREE.Mesh(spheregeometry, spherematerial);
sphere.position.set(-2.0, 0, 0);
scene.add(sphere);
renderer.render(scene, camera);

Three.js reflective plane with cubeCamera & texture

I'm trying to create a simple plane which will combine a texture and a cubeCamera reflection and I'm failing and I'm not sure what to do next?
If I swap the envMap on the plane material to a simple jpg/png texturecube then it will work fine, but this is not what I want.
My goal is to create a glossy reflective plane with a texture that will be replicated to create a room and reflect any 3d meshes inside the room.
Here is what I have so far.
var scene, camera, cameraCube, renderer;
var light1, light2;
var wallMesh;
var init = function(){
// scene
scene = new THREE.Scene();
// cameras
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set(0,50000,50000);
cameraCube = new THREE.CubeCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
cameraCube.renderTarget.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter
scene.add(cameraCube)
// textureCube just for test
// var path = "http://three.dev/cortana/textures/";
// var format = '.png';
// var urls = [
// path + 'px' + format, path + 'nx' + format,
// path + 'py' + format, path + 'ny' + format,
// path + 'pz' + format, path + 'nz' + format
// ];
// var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var texture = THREE.ImageUtils.loadTexture( 'http://three.dev/various/textures/white.png' );
// room
var plane = new THREE.PlaneBufferGeometry( 50000, 50000 );
var wallMaterial = new THREE.MeshLambertMaterial( {
color: 0x333333,
ambient: 0xdddddd,
map: texture,
envMap: cameraCube.renderTarget,
combine: THREE.MixOperation,
reflectivity: 0.5
} );
var wallMaterial = new THREE.MeshBasicMaterial({
envMap: cameraCube.renderTarget,
})
wallMesh = new THREE.Mesh( plane, wallMaterial );
wallMesh.rotateX(toRadians(-90));
wallMesh.position.set(0,-250,0);
scene.add( wallMesh );
// sphere
var sphereGeometry = new THREE.SphereGeometry( 100, 64, 64 );
var sphereMaterial = new THREE.MeshPhongMaterial( { ambient: 0x111111, color: 0x111111, specular: 0x333333, shininess: 50, shading: THREE.SmoothShading });
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.scale.x = sphere.scale.y = sphere.scale.z = 20;
sphere.position.set( 0, 2000, 0 );
scene.add(sphere);
// lights
var ambient = new THREE.AmbientLight(0xffffff);
scene.add( ambient );
var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight1.position.set( 0, 50000, 0 ).normalize();
scene.add( directionalLight1 );
var color = new THREE.Color("rgb(0,255,0)");
light2 = new THREE.PointLight(color, 1, 50000);
light2.position.set(2000,500,2000);
scene.add( light2 );
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor( 0xffffff, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
document.getElementsByTagName('body')[0].appendChild( renderer.domElement );
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
controls.minDistance = 1000;
controls.maxDistance = 50000;
controls.minPolarAngle = 0;
controls.maxPolarAngle = toRadians(90)
// Events
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
controls.update();
//camera.lookAt( scene.position );
//cameraCube.rotation.copy( camera.rotation );
//renderer.render( scene, cameraCube );
wallMesh.visible = false;
cameraCube.updateCubeMap(renderer, scene);
wallMesh.visible = true;
renderer.render( scene, camera );
}
window.onload = function(){
init();
animate();
}

Categories