The animation of ThreeJs loses its context in angular 2

I want to use ThreeJs in angular 2. I can get the scene and a simple cube to render, but the issue comes when the animate() call is used. Here is the code. import { OnInit, Component } from '@angular/core'; const THREE = require('three'); @Component(

How can i control when to render three scene js

All examples that I saw, uses a loop structure to render the scene, like that: renderer.render(cena, camera); function render(){ renderer.render(cena, camera); //code to render requestAnimationFrame(render); } render(); But I want to control the rend

Fusion of meshes of different colors

Using Three.js r75 I am trying to display cubes that change color depending on an integer value from green to red. I have tried multiple ways as I am stuck on this. I was unable to make cubeMat.material.color.setRGB work and creating a new Three.Colo

Simple solar system with three.js

I have to create a small solar system (1 star, 2 planets, 1 moon orbitating per planet) with three.js This is my first time programming something with three.js (and JavaScript in general) so I'm a complete newbie. I managed to create my static system

How to point a pointlight in a specific direction?

I want to use a PointLight as a SpotLight but my camera is looking along the -z direction whilst the pointlight points to ( 0, 0, 0 ) Hoe can I point it to say ( 0, 0, -100 )?If you want a light shining to a specified point, use the SpotLight. // Whi

How to apply a texture to a part of a face?

I want to apply a texture to only a specified portion of the face of a cube - not the whole face. I want to do this multiple times to the same face. For example, I want to put texture1.jpg on the top right corner of the face, texture2.jpg on the lowe

Is it possible to use a camera for two scenes?

Hello :) I'm trying to render two different scenes. With a camera that should move following the same way simultaneously in the two renderer. To explain what I want to do : I want to render two different pointclouds in two differents scenes, but I wa

Threejs BufferGeometry - Make some faces with other textures

i have an output date like this: geom[0] = { texturesindexT: new Int16Array([0,1,2,3]), texturesindexS: new Int16Array([-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,...]), materialsindexT: new Int16Array([-1,-1,-1,-1]), materialsindexS: new Int16Array([-1,0,1,2,3,4

How to load a gltf template into Three.js?

I decided to try out gltf format for rendering models in Three.js and I'm using this converter ( to convert the model from Collada to GlTF. It spits out a *.gltf file, however in the examples in Three.js they pas

three.js - Bunk layers

When several objects overlap on the same plane, they start to flicker. How do I tell the renderer to put one of the objects in front? I tried to use .renderDepth, but it only works partly - see example here: Both boxes hav

THREE.js - Can not load texture locally

I have a local file in which I try to load texture like this: var texture = THREE.ImageUtils.loadTexture( 'image.jpg' ); var cubeGeo = new THREE.CubeGeometry( 50, 50, 50 ); var cubeMat = new THREE.MeshBasicMaterial( { map: texture } ); var cube = new

Three.js CSSObject3D How to get the width of the object

Ok so firstly I dynamically great HTML Dom Elements from HTML text, I use this function String.prototype.toDomElement = function () { var wrapper = document.createElement('div'); wrapper.className = "toDomWrapper"; wrapper.innerHTML = this; retu

Three.js: Rotating in the center of an object

I've modified this single spinning cube so that it contain 3 cubes in an Object3D In the above example it uses the first cube. I need it to rotate on a single axis at the exact center of the object. The object3D code g

Create a 3D map for the game fps - Three.js

I would like to create a 3d map like in Counter-Strike games, with Three.js, but I don't know in which format to create it? What tool should I use to create it?Here is a really good example of a 3d map created using three.js canvas renderer: http://w

CubeGeometry equivalent using CSS3DRenderer, Three.JS

Following my previous question at SO, Creating a CubeGeometry equivilent using CSS3DRenderer I am trying to build a flexible 3D cube which would work under CSS3DRenderer. Here is the current status, also available at Ther

The return type is incompatible with

Background I am writing a three.js for java and using LWJGL as a backend. I am extending LWJGL with the required methods that three.js needs but I have run into a problem. The problem I need to Override Vector2f.set and so on for each of its librarie

two collada colliding object

I am trying to use Ray intersect to find out if 2 collada object collide. But so far no success :( my code object.updateMatrix(); // ray var f_vector = new THREE.Vector3( 0, 0, -1 ); var b_vector = new THREE.Vector3( 0, 0,

Water / mirror surface in WebGL using three JS

I am trying to make a water surface in WebGL using Three.js. I think I will start with just a mirror as I think I know how to add displacement to make basic ripple effects. This is what I know: Reflection is usually made by rendering a vertically (y-

Threejs Using 3ds Max Objects with Textures

I purchased 3d human teeth model from turbosquid in a 3ds scene format. All I want to do is to extract individaul teeth from the file and use them in threejs script to display them on web page. What I did was exported one tooth from 3ds Max in .obj f

Large image and javascript

I am using pannellum ( which uses Three.js and I am using it to work with local files. It works fine for small files, but the image that I have is 5000 * 10000, and it doesn't load them. What

THREE.Line with blur

Is there any options for Line with blur or others filters? I use alternative for Line with THREE.Plane with texture but imitate moving with position vector and lookAt is not simple as dynamic line with vertices[0] a vertices[1]. The Line object using