We Keep Coding

When using the three. js WebGLRenderTarget, there is a problem when the plane is attached to the sphere？

Thank you very much for coming to see this problem. I don't know much about THREE, but I need to use it
picture：
const RTScene = this.vr.scene;
this.RTScene = RTScene;
var renderer = this.vr.renderer;
var camera = this.vr.camera;
var materials = []; //创建一个贴图数组
const video1 = document.getElementById("videos1");
const texture1 = new THREE.VideoTexture(video1);
texture1.maxFilter = THREE.NearestFilter;
texture1.minFilter = THREE.NearestFilter;
var geometry = new THREE.PlaneGeometry(400, 200, 3, 3);
// const geometry = new THREE.SphereGeometry(30, 32, 32, 0, 6.28, 3.14, 3.14);
this.handleGetTxture();
materials = new THREE.MeshBasicMaterial({
map: texture1,
side: THREE.DoubleSide,
});
var bufferGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
this.planegeometry = geometry;
this.bufferGeometry = bufferGeometry;
// var material = new THREE.MeshFaceMaterial(materials);
var mesh = new THREE.Mesh(bufferGeometry, materials); //网格模型对象Mesh
mesh.position.z = 200;
RTScene.add(mesh); //网格模型添加到场景中
const RenderTarget = new THREE.WebGLRenderTarget(1000, 1000, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
wrapS:THREE.RepeatWrapping
});
this.RenderTarget = RenderTarget;
this.vr.RenderTarget = RenderTarget;
this.vr.RTScene = RTScene;
var scene = this.vr.scene;
var renderer = this.vr.renderer;
var camera = this.vr.camera;
var RenderTarget = this.RenderTarget;
var obj = this.vr.VRObject.getObjectByName("__mxrealityDefault");
if (obj) {
obj.material.map = RenderTarget.texture;
// obj.material.map = RenderTarget.texture;
}
It is strange that the texture of the sphere post is blurred and serrated and not as good as I thought. Do I need to make any Settings or method calls

Three.js PointLights not working correctly with Lambert material

I am trying to create a scene lit by PointLights but the lights are not working as expected when using Lambert material. It looks like the lights only render when both lights reach the surface.
When I tried to use Phong material, it renders correctly.
My renderer:
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.renderSingleSided = false;
Plane:
var planeGeometry = new THREE.PlaneGeometry(40, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial();
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true;
Walls:
var boxMaterial = new THREE.MeshLambertMaterial({ color: 0x457dd8 });
var boxGeometry = new THREE.BoxGeometry(9, 2, 0.2, 1, 1, 1);
var box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;
box.receiveShadow = true;
Ambient light
var ambientLight = new THREE.AmbientLight("#999292");
and pointLights:
var pointLight = new THREE.PointLight(0xff0000, 20, 50);
pointLight.position.set(16, 1.5, 15.5);
pointLight.castShadow = true;
What am I doing wrong? I think it may be a bug.
Here is my example: https://jsfiddle.net/aojnmspn/
I am using Three.js R87

Three.js render not showing a simple cube when I want to show simple mesh

I want to show a simple plane and a simple cube but the plane hides the cube, the cube is located between the camera and the plane, but the plane "hides" the cube.
This is my scene without plane:
and here it is with the plane added:
I am pretty sure they are in a location where the cube should to be showed.
Here is my code:
var scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(45,Window.innerWidth,window.innerHeight,0.1,1000),
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
var axes = new THREE.AxisHelper(20);
scene.add(axes);
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color:0x777777});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 5;
scene.add(cube);
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x55cc88});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
//scene.add(plane);
//plane.receiveShadow = true;
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);
scene.add(spotLight);
//renderer.setClearColor(0xEEEEEE,1);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.render(scene,camera);
$("#WebGl-salida").append(renderer.domElement);

Pay attention to names of objects and order and correctness of parameters in methods:
camera = new THREE.PerspectiveCamera(45,Window.innerWidth,window.innerHeight,0.1,1000)
should be like:
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000)
jsfiddle example

Many thanks! Both for the answer and for the suggestion to edit the question to make it more understandable (my English has to improve) Now it is working perfectly.

Light rays from point light three.js

Is there a way to see the light rays from a point light in a Three js scene. I have tried fog but it makes the whole objects in the scene the color of fog.
var width = $('#g_pre_emo').width();
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffff00, 0, 10);
var camera = new THREE.PerspectiveCamera(50, width / 500, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width, 500);
$('#g_pre_emo').append(renderer.domElement);
var intensity = 2.5;
var distance = 5;
var decay = 2.0;
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
renderer.shadowMap.Enabled = true;
renderer.setClearColor(0xffffff, 1);
var happyGroup = new THREE.Object3D();
var sadGroup = new THREE.Object3D();
var angryGroup = new THREE.Object3D();
var relaxedGroup = new THREE.Object3D();
scene.add(happyGroup);
scene.add(sadGroup);
scene.add(angryGroup);
scene.add(relaxedGroup);
var c1 = 0xffff00;
var sphere = new THREE.SphereGeometry(0.25, 16, 8);
light1 = new THREE.PointLight(c1, intensity, distance, decay);
light1.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: c1})));
scene.add(light1);
happyGroup.position.set(-3, 3, 0);
sadGroup.position.set(3, 3, 0);
angryGroup.position.set(-3, -3, 0);
relaxedGroup.position.set(3, -3, 0);
var happyGeometry = new THREE.SphereGeometry(1, 50, 50);
var happyMaterial = new THREE.MeshNormalMaterial();
var happySphere = new THREE.Mesh(happyGeometry, happyMaterial);
scene.add(happySphere);
happyGroup.add(happySphere);
var sadGeometry = new THREE.SphereGeometry(1, 50, 50);
var sadMaterial = new THREE.MeshNormalMaterial();
var sadSphere = new THREE.Mesh(sadGeometry, sadMaterial);
scene.add(sadSphere);
sadGroup.add(sadSphere);
var angryGeometry = new THREE.SphereGeometry(1, 50, 50);
var angryMaterial = new THREE.MeshNormalMaterial();
var angrySphere = new THREE.Mesh(angryGeometry, angryMaterial);
scene.add(angrySphere);
angryGroup.add(angrySphere);
var relaxedGeometry = new THREE.SphereGeometry(1, 50, 50);
var relaxedMaterial = new THREE.MeshNormalMaterial();
var relaxedSphere = new THREE.Mesh(relaxedGeometry, relaxedMaterial);
scene.add(relaxedSphere);
relaxedGroup.add(relaxedSphere);
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera.position.z = 15;
function render() {
renderer.render(scene, camera);
}
;
render();
animate();
function animate() {
requestAnimationFrame(animate);
}
If i run the above code the i cant see any fog in the scene
the fiddle for above code is
https://jsfiddle.net/bqv5ynbo/1/

Possibly, you can use VolumetricSpotlightMaterial from Jerome Etienne.
For me it worked well for Three.js r71, though I haven't tried it with later revisions.
Example of usage

'Light Rays' aren't an automatically occurring thing.
Typically, light rays are created using advanced pixel shaders (stencil/shadow projection over lit region / volumetric fog) or in simple cases by creating simple alpha-blended polygons with 'ray' textures applied.
A point light is simply a light that does not apply directional calculations during it's shading phase. Instead, only distance based calculations are made.
Good Luck!

ThreeJS won't cast any shadows

I'm having some trouble with ThreeJS. I've got some cubes, that should be casting shadows on a plane below, but they don't - I've been Googling a solution for a few hours now and tried everything I could find, but I can't get it to work.
I use MeshPhongMaterial on all objects, and I've added .castShadow and .receiveShadow to all appropriate objects. I use a SpotLight, directed at the ground - it lights the cubes, and the ground, but the cubes don't cast a shadow. Here's an example of a cube and ground:
var cubeGeometry = new THREE.CubeGeometry(20, 20, 20);
cube1 = new THREE.Mesh(cubeGeometry, material);
cube1.shading = THREE.FlatShading;
cube1.castShadow = true;
cube1.receiveShadow = true;
var groundGeometry = new THREE.PlaneGeometry(200, 200);
var groundMaterial = new THREE.MeshPhongMaterial({color: 0xf0dc3f});
ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.shading = THREE.FlatShading;
ground.position.y = -30;
ground.rotation.x = Math.PI / 2;
ground.rotation.z = Math.PI / 4;
ground.receiveShadow = true;
And my JsFiddle: https://jsfiddle.net/fggjp2n9/

You are missing:
renderer.shadowMap.enabled = true;
https://jsfiddle.net/fggjp2n9/1/