We Keep Coding

Why doesn't my three.js code show the light effect?

Following the manual, I made a three.js example, but the light effect doesn't appear, why the light source doesn't appear without any error about the light source?
import * as THREE from "/assets/threejs/build/three.module.js"
class App {
// 생성 초기화
constructor(){
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
// 카메라
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
100,
)
camera.position.z = 2
this._camera = camera;
}
// 광원
_setupLight(){
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
// 모델
_setupModel(){
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial( { color: 0x44a88 } );
const cube = new THREE.Mesh( geometry, material );
this._scene.add(cube);
this._cube = cube;
}
// 창크기 번경
resize(){
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
// 랜더링
render(time){
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
// 업데이트
update(time){
time *= 0.001;
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function(){
new App();
}
The screenshot below is the result of my example code.
The screenshot below is the result of the manual.
I'm sorry for posting multiple questions with a low difficulty problem, but, I'm learning three.js for the first time. In vscode, there is no three.js code hint library, and it's hard. How can I express the light effect normally in my example code? Will there be? thanks for reading the problem

Do not use MeshBasicMaterial, but MeshStandardMaterial. MeshBasicMaterial for drawing geometries in a flat or wireframe way. MeshStandardMaterial is a physically based material that makes the surface interact with the light.

Three JS Keep Label Size On Zoom

I'm working on a solar system in three.js and am curious if there is an easy way to make the labels for the planets I have below all show up the same size regardless of how far they are from the camera? I can't seem to find a solution to this. I figure you could calculate the distance from each label to the camera then come up with some sort of scaling factor based on that. Seems like there would be an easier way to accomplish this?
Thanks!
Updated with answer from prisoner849. Works excellent!

I figure you could calculate the distance from each label to the camera then come up with some sort of scaling factor based on that.
And it's very simple. Let's say, a THREE.Sprite() object (label) is a child of a THREE.Mesh() object (planet), then in your animation loop you need to do
var scaleVector = new THREE.Vector3();
var scaleFactor = 4;
var sprite = planet.children[0];
var scale = scaleVector.subVectors(planet.position, camera.position).length() / scaleFactor;
sprite.scale.set(scale, scale, 1);
I've made a very simple example of the Solar System, using this technique.

For the benefit of future visitors, the transform controls example does exactly this:
https://threejs.org/examples/misc_controls_transform.html
Here's how its done in the example code:
var factor;
if ( this.camera.isOrthographicCamera ) {
factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom;
} else {
factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 );
}
handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 7 );

Finally I found the answer to your question:
First, create a DOM Element:
<div class="element">Not Earth</div>
Then set CSS styles for it:
.element {position: absolute; top:0; left:0; color: white}
// |-------------------------------| |-----------|
// make the element on top of canvas is
// the canvas black, so text
// must be white
After that, create moveDom() function and run it every time you render the scene requestAnimationFrame()
geometry is the geometry of the mesh
cube is the mesh you want to create label
var moveDom = function(){
vector = geometry.vertices[0].clone();
vector.applyMatrix4(cube.matrix);
vector.project(camera);
vector.x = (vector.x * innerWidth/2) + innerWidth/2;
vector.y = -(vector.y * innerHeight/2) + innerHeight/2;
//Get the DOM element and apply transforms on it
document.querySelectorAll(".element")[0].style.webkitTransform = "translate("+vector.x+"px,"+vector.y+"px)";
document.querySelectorAll(".element")[0].style.transform = "translate("+vector.x+"px,"+vector.y+"px)";
};
You can create a for loop to set label for all the mesh in your scene.
Because this trick only set 2D position of DOM Element, the size of label is the same even if you zoom (the label is not part of three.js scene).
Full test case: https://jsfiddle.net/0L1rpayz/1/
var renderer, scene, camera, cube, vector, geometry;
var ww = window.innerWidth,
wh = window.innerHeight;
function init(){
renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
renderer.setSize(ww,wh);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
camera.position.set(0,0,500);
scene.add(camera);
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set( 0, 0, 500 );
scene.add(light);
//Vector use to get position of vertice
vector = new THREE.Vector3();
//Generate Not Earth
geometry = new THREE.BoxGeometry(50,50,50);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//Render my scene
render();
}
var moveDom = function(){
vector = geometry.vertices[0].clone();
vector.applyMatrix4(cube.matrix);
vector.project(camera);
vector.x = (vector.x * ww/2) + ww/2;
vector.y = -(vector.y * wh/2) + wh/2;
//Get the DOM element and apply transforms on it
document.querySelectorAll(".element")[0].style.webkitTransform = "translate("+vector.x+"px,"+vector.y+"px)";
document.querySelectorAll(".element")[0].style.transform = "translate("+vector.x+"px,"+vector.y+"px)";
};
var counter = 0;
var render = function (a) {
requestAnimationFrame(render);
counter++;
//Move my cubes
cube.position.x = Math.cos((counter+1*150)/200)*(ww/6+1*80);
cube.position.y = Math.sin((counter+1*150)/200)*(70+1*80);
cube.rotation.x += .001*1+.002;
cube.rotation.y += .001*1+.02;
//Move my dom elements
moveDom();
renderer.render(scene, camera);
};
init();
body,html, canvas{width:100%;height:100%;padding:0;margin:0;overflow: hidden;}
.element{color:white;position:absolute;top:0;left:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<!-- My scene -->
<canvas id="scene"></canvas>
<div class="element">
<h1>Not Earth</h1>
</div>
If you downvote this, please tell me why. I will try my best to improve my posts.

If you are using spriteMaterial to present your text, you could try to set the sizeAttenuation attribute to false.
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff, sizeAttenuation:false } );
See more information from here:
https://threejs.org/docs/index.html#api/en/materials/SpriteMaterial.sizeAttenuation

three.js skybox: obvious corners and lots of distortion

Today I've been experimenting with building my first ever skybox in three.js. I've read a lot of tutorials and the code I've ended up with is based on this one: http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/
I did make a few changes in order to allow for the images to load first, and to make it compatible with the version of three.js which I am using.
I've overcome a lot of small problems to get to the point I am currently at, but cannot find any answer to my current issue despite having searched quite hard. My problem is that despite using purpose-built skybox textures downloaded from the internet, it is glaringly obvious that my skybox is a cube with corners and edges. The textures appear heavily distorted and are not at all convincing.
Here is a screenshot of how my skybox looks:
And here is a link to the site from which I downloaded the images:
http://www.humus.name/index.php?page=Cubemap&item=Yokohama3
As you can see, in their preview it looks much better.
I've tried this with a few different downloaded textures and every time it is very obvious that you are looking at the inside of a cube.
Here's my code (I'm including all my code, not just the section which creates the skybox):
var scene;
var camera;
var renderer;
function createRenderer () {
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMapEnabled = true;
//renderer.shadowCameraNear = 0.5;
//renderer.shadowCameraFar = 500;
}
function createCamera () {
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
0.1, 1000
);
camera.position.x = 50;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);
}
function createPlane () {
var material = new THREE.MeshLambertMaterial({
color: 0xcccccc,
})
var geometry = new THREE.PlaneGeometry(40, 40)
var plane = new THREE.Mesh(geometry, material)
plane.receiveShadow = true;
plane.rotation.x = -Math.PI/2
plane.position.y = -6;
scene.add(plane)
}
function createLight () {
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set( 0, 50, 20 );
spotLight.shadowCameraVisible = true;
spotLight.shadowDarkness = 0.5
spotLight.shadowCameraNear = 0;
spotLight.shadowCameraFar = 100;
spotLight.shadowCameraLeft = -50;
spotLight.shadowCameraRight = 50;
spotLight.shadowCameraTop = 50;
spotLight.shadowCameraBottom = -50;
spotLight.castShadow = true;
scene.add(spotLight);
}
function createSkyboxAndSphere () {
var urlPrefix = "Yokohama3/";
var urls = [ urlPrefix + "posx.jpg", urlPrefix + "negx.jpg",
urlPrefix + "posy.jpg", urlPrefix + "negy.jpg",
urlPrefix + "posz.jpg", urlPrefix + "negz.jpg" ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls , undefined, function () {;
var shader = THREE.ShaderLib["cube"];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
shader.uniforms['tCube'].value = textureCube; // textureCube has been init before
var material = new THREE.ShaderMaterial({
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
uniforms : shader.uniforms,
depthWrite : false,
side: THREE.BackSide,
});
var geometry = new THREE.BoxGeometry(100, 100, 100)
var skybox = new THREE.Mesh(geometry, material)
scene.add(skybox)
var material = new THREE.MeshPhongMaterial({
color: "red",
envMap: textureCube,
reflectivity: 0.3,
})
var geometry = new THREE.SphereGeometry(6, 30, 15)
var sphere = new THREE.Mesh(geometry, material)
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere)
});
}
function init () {
scene = new THREE.Scene();
createRenderer();
createCamera();
createLight();
createPlane ();
createSkyboxAndSphere ();
document.getElementById("container").appendChild(renderer.domElement)
render ()
}
function render () {
renderer.render(scene, camera)
requestAnimationFrame(render);
}
window.onload = function () {
init ();
}
I suspect I am fundamentally misunderstanding something about how cubemapping and skyboxes work - I am very new to this in particular and javascript in general and am aware of huge gaps in my knowledge.
My apologies if the answer to this is obvious and/or the question has been asked before, and a pre-emptive thanks for your help!

Your camera needs to be in the center of the skybox -- or at least near the center.
So either move your camera very close to the box center, or update the box position every frame to match the camera position.
Or make the skybox much bigger relative to the camera offset from the origin.
Or place the skybox in a separate scene and have two cameras and two render passes, as in this example.
three.js r.74

three.js edges and text jagged/blurry on rotation

I'm a three.js beginner. Trying to apply an html canvas as texture to plane geometry. Works fine when there is no rotation. When rotated, a) outside edges of the mesh become jagged (edges/lines within the image are fine) and b) text becomes blurry.
What do I have to do to keep outside edges and text crisp?
My texture is power-of-two (128 x 512). Turning antialiasing on doesn't help.
Here is a screenshot without rotation
And here with rotation.
Code looks like this:
var eltTexture = toTexture2(d, this, go.w, go.Res.ow[0]);
// map texture to material
var material = new THREE.MeshBasicMaterial(
{ map : eltTexture } );
//define sub image of texture to be applied to mesh
var cutout = [
new THREE.Vector2(0, (128 - go.Res.ow[0])/128),
new THREE.Vector2(go.w/512, (128 - go.Res.ow[0])/128),
new THREE.Vector2(go.w/512, 1),
new THREE.Vector2(0, 1)];
// geometry and UV mapping
var geometry = new THREE.PlaneGeometry (go.w, go.Res.ow[0]);
geometry.faceVertexUvs[0] = []; // initialize
geometry.faceVertexUvs[0][0] =
[cutout[3], cutout[0], cutout[2]];
geometry.faceVertexUvs[0][1] =
[cutout[0], cutout[1], cutout[2]];
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set(d.threeX, d.threeY, d.threeX);
mesh.rotation.set(0,0.6,0);
scene.add( mesh );
});
renderer.render( scene, camera );
function toTexture2 (d, svgNode, svgWidth, svgHeight){
// step 1: serialize eltSVG to xml
var eltXML = new XMLSerializer().serializeToString(svgNode);
eltXML = 'data:image/svg+xml;charset = utf8,' + eltXML;
// step 2: draw eltXML to image
var eltImage = document.body.appendChild(
document.createElement("img"));
eltImage.id = "eltImage";
eltImage.style.display = "none";
eltImage.width = svgWidth;
eltImage.height = svgHeight;
eltImage.src = eltXML;
// step 3: draw image to canvas
// NOTE: define canvas parameters position, width and
// height in html, NOT IN CSS, otherwise image
// will become blurry - don't ask why!
var eltCanvas = document.body.appendChild(
document.createElement("canvas"));
eltCanvas.id = "eltCanv";
eltCanvas.style.display = "none";
eltCanvas.width = 512;
eltCanvas.height = 128;
// get context
var ctx = eltCanvas.getContext("2d", {alpha: false});
// draw svg element to canvas, not including portrait image
ctx.drawImage(eltImage, parseInt(0), parseInt(0),
svgWidth, svgHeight);
// draw portrait image to canvas
var portrait = document.getElementById(d.nameConcat + "Img");
ctx.globalAlpha = 0.6; // opacity of portrait image
ctx.drawImage(portrait, go.Res.strw[0], go.Res.strw[0],
go.Res.iw[0], go.Res.iw[0]);
var texture = new THREE.Texture(eltCanvas);
texture.needsUpdate = true;
return texture;
} // function toTexture2
Many thanks in advance for your help!

Even though it's been a long time since you've posted this, I have the solution in case anyone else is experiencing the same issue.
Add this to your renderer:
const renderer = new THREE.WebGLRenderer({antialias: true});

requestAnimationFrame in polymer

I'm trying to implement an thrre.js animation on polymer with the code below. I can render the scene the first time, but when I call requestAnimationFrame(animate) - i.e. I call the function animate itself - then the code brake because it can't find any variable defined before. I know that requestAnimationFrame() accepts 2 parameters: the function to call and the element on which to call the function. I tried many different element without success.
Does anyone have any idea? thanks a lot.
(function(root) {
'use strict';
Polymer('x-trial-objects', {
app : document.querySelector('x-app'),
container : null,
scene : null,
camera : null,
renderer : null,
controls : null,
stats : null,
keyboard : new THREEx.KeyboardState(),
clock : new THREE.Clock(),
cube : null,
parameters : null,
gui : null,
// Trial params
dimensionChoice : 1,
speed : 0.007,
spikeNum : 3,
radiusChange : 0.02,
minLength : 1,
maxLength : 3,
rangeLength : 2,
eventOccur : 1,
ang : [-40, -95, 170, 40],
getRandomInt : function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
timeOcc : function timeOcc(speed){
// Create array of possible times at which the event could occur, based on the rate of change (speed variable)
var _this = this,
timeArray = [],
i;
for (i=10;i<1/speed;i+=1) {
// this adds all possible steps of the dimension and rounds to 3 decimals
// Update - this now only allows the event to occur after the first 10 time steps to give subjects time to actually see the stimulus before the change
timeArray.push( Math.round((i*speed)*1000) / 1000 );
}
// Select a random timepoint in that array as the onset time of the event, and a timepoint N points beyond for the offset.
var t1 = _this.getRandomInt(0,timeArray.length-1),
t2 = t1+7;
return [timeArray[t1],timeArray[t2]];
},
sigmoid : function(x,t) {
// scale the x parameter by the temperature parameter
var x=(x*t*2)-t;
// calculate sigmoid
return 1 / ( 1 + Math.exp(-x) );
},
quadratic : function(x) {
// rescale the x parameter between -1 and 1
x=(x*2)-1;
// Calculate quadratic
return x*x;
},
init : function (){
var _this = this
console.log(this)
console.log(document)
// Note that I could have a purely random number between 0 and 1 on each trial, but here I am specifically sampling from just 10 points along the dimension. This (a) ensures a good sampling across the whole dimension over trials and (b) allows us to constrain the sampling to certain parts of the dimension so that we can later test stimuli that were not presented in this phase. I may want to change this so that the overall experimental script deals with the randomisation. That way I can have better control over the sampling so that e.g. I have 10 points along the dimension, each sampled the same number of times over trials. At present i do not have this level of control, as every time the script is called it will pick one of these at random.
var dimensionPoints = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];
if (_this.dimensionChoice===1){
_this.k1 = 0;
_this.k2 = dimensionPoints[_this.getRandomInt(0, dimensionPoints.length-1)];
}
if (_this.dimensionChoice===2){
_this.k1 = dimensionPoints[_this.getRandomInt(0, dimensionPoints.length-1)];
_this.k2 = 0;
}
// SCENE
_this.scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
_this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
_this.scene.add(_this.camera);
_this.camera.position.set(0,0,10);
_this.camera.lookAt(_this.scene.position);
// RENDERER
if ( Detector.webgl )
_this.renderer = new THREE.WebGLRenderer( {antialias:true} );
else
_this.renderer = new THREE.CanvasRenderer();
_this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
_this.container = this.shadowRoot.querySelector('#ThreeJS')
_this.container.appendChild( _this.renderer.domElement );
// EVENTS
THREEx.WindowResize(_this.renderer, _this.camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
_this.controls = new THREE.OrbitControls( _this.camera, _this.renderer.domElement );
// STATS
_this.stats = new Stats();
_this.stats.domElement.style.position = 'absolute';
_this.stats.domElement.style.bottom = '0px';
_this.stats.domElement.style.zIndex = 100;
_this.container.appendChild( _this.stats.domElement );
// LIGHT
var ambientLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light.position.set( 200, 400, 500 );
var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light2.position.set( -500, 250, -200 );
_this.scene.add(ambientLight);
_this.scene.add(light);
_this.scene.add(light2);
//Create central sphere
var radius = 0.6;
var geometry = new THREE.SphereGeometry( radius, 32, 16 );
var material = new THREE.MeshLambertMaterial( { color: "grey" } );
var sphere = new THREE.Mesh( geometry, material );
//Add the sphere to object spikedBall
_this.spikedBall = new THREE.Object3D();
_this.spikedBall.add( sphere );
// Note that I can no longer loop through these four spikes, as I want to be able to scale each one independently after adding them to the scene
var cylGeom = new THREE.CylinderGeometry( 0, 0.3, _this.minLength, 32 );
var cylinder = new THREE.Mesh( cylGeom, material );
cylinder.position.y=_this.minLength/2;
_this.spike1 = new THREE.Object3D();
_this.spike1.add(cylinder);
_this.spike1.rotation.z = _this.ang[0] * Math.PI/180;
_this.spike1.scale.y = (_this.k1 * _this.rangeLength) + _this.minLength;
_this.spikedBall.add( _this.spike1 );
var cylGeom = new THREE.CylinderGeometry( 0, 0.3, _this.minLength, 32 );
var cylinder = new THREE.Mesh( cylGeom, material );
cylinder.position.y=_this.minLength/2;
_this.spike2 = new THREE.Object3D();
_this.spike2.add(cylinder);
_this.spike2.rotation.z = _this.ang[1] * Math.PI/180;
_this.spike2.scale.y = (_this.sigmoid(_this.k1,7) * _this.rangeLength) + _this.minLength;
_this.spikedBall.add( _this.spike2 );
var cylGeom = new THREE.CylinderGeometry( 0, 0.3, _this.minLength, 32 );
var cylinder = new THREE.Mesh( cylGeom, material );
cylinder.position.y = _this.minLength/2;
_this.spike3 = new THREE.Object3D();
_this.spike3.add(cylinder);
_this.spike3.rotation.z = _this.ang[2] * Math.PI/180;
_this.spike3.scale.y = (_this.k2 * _this.rangeLength) + _this.minLength;
_this.spikedBall.add( _this.spike3 );
var cylGeom = new THREE.CylinderGeometry( 0, 0.3, _this.minLength, 32 );
var cylinder = new THREE.Mesh( cylGeom, material );
cylinder.position.y=_this.minLength/2;
_this.spike4 = new THREE.Object3D();
_this.spike4.add(cylinder);
_this.spike4.rotation.z = _this.ang[3] * Math.PI/180;
_this.spike4.scale.y = (_this.quadratic(_this.k2) * _this.rangeLength) + _this.minLength;
_this.spikedBall.add( _this.spike4 );
//Add spiked Ball to the scene
_this.scene.add( _this.spikedBall )
console.log(_this.scene)
},
render : function() {
var _this = this;
_this.renderer.render( _this.scene, _this.camera );
},
animate : function animate() {
console.log(this.container)
var _this = this,
timeOccur = _this.timeOcc(_this.speed);
if (_this.dimensionChoice===1)
{
_this.k1 += _this.speed;
_this.k1 = Math.round(_this.k1*1000) / 1000;
_this.spike1.scale.y = (_this.k1 * _this.rangeLength) + _this.minLength;
_this.spike2.scale.y = (_this.sigmoid(_this.k1,7) * _this.rangeLength) + _this.minLength;
if ( _this.k1>=timeOccur[0] && _this.k1<=timeOccur[1])
{
_this.spikedBall.children[_this.spikeNum].children[0].geometry = new THREE.CylinderGeometry( _this.radiusChange, 0.3, 1, 32 );
}
else {
_this.spikedBall.children[_this.spikeNum].children[0].geometry = new THREE.CylinderGeometry( 0, 0.3, 1, 32 );
}
if (_this.k1 < 1)
{
requestAnimationFrame( animate);
}
}
this.render();
},
domReady : function domReady () {
this.init();
this.animate();
}
});}(window));