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
I've made this table mesh which i would like to cast shadows on the pane(floor) mesh. I've been trying playing around with the ShadowMap for quite some while now but i cant seem to get it to work.
This is the current look:
camera & scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(35, (window.innerWidth / window.innerHeight), 0.1, 1000);
camera.position.z = 8;
camera.position.y = 2;
camera.lookAt( scene.position );
The table mesh
const boxWidth = 1; const boxHeight = 0.1; const boxDepth = 1;
const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const textureLoader = new THREE.TextureLoader();
const customPicture = textureLoader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
const tableBoardMaterial = new THREE.MeshLambertMaterial({map: customPicture, wireframe: false})
const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial)
tableBoard.position.set(0, 0, 0)
tableBoard.castShadow = true;
The lightning & shadow
const lightAndShadow = () => {
const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
const lightIntensity = 1.3; const lightDistance = 18;
const light = new THREE.PointLight(0xffffff, lightIntensity, lightDistance);
light.position.set(1, 1, 1)
light.castShadow = true
light.target = tableBoard;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000))
light.shadow.bias = 0.0001
light.shadow.mapSize.width = 2048*2
light.shadow.mapSize.height = 2048*2
scene.add(light, ambientLight);
}
The floor mesh
const floorWidh = 20; const floorHeight = 20; const floorWidthSegments = 50; const floorHeightSegments = 50;
const floorGeometry = new THREE.PlaneGeometry( floorWidh, floorHeight, floorWidthSegments, floorHeightSegments );
floorGeometry.rotateX( - Math.PI / 2 );
const floorTexture = new THREE.TextureLoader().load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOOcWSD0K2mPwokAFfZIhq5Xl49bh8B17RlU6NqCGa4UOKydgX');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(20, 20);
const floorMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: false}),
floor = new THREE.Mesh( floorGeometry, floorMaterial );
floor.position.set(0, -tableLegHeightPosition, 0)
floor.receiveShadow = true;
Any suggestions on how i can get the shadows to work would be much appreciated.
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000))
You are overriding the default camera parameters of LightShadow and defining the Near Clipping plane to 500 which is making the tableBoard shadows to disappear.
You can reduce this number to the default of 0.5 or something near to it. Having the near clipping plane as 500 is a very big number for your case.
From the Docs:
.shadow : LightShadow
A LightShadow used to calculate shadows for this light.
The lightShadow's camera is set to a PerspectiveCamera with fov of 90, aspect of 1, near clipping plane at 0.5 and far clipping plane at 500.
Refer Three.js complete doc for Point light shadows here
I am working on a 3D solar system project that involves a rocket rotation around a planet. I tried following this tutorial (https://www.youtube.com/watch?v=7fJgVyq0OYo) to create a skybox for my planets to exist within. Although there are no errors being displayed and I know the skybox is being created, it is nowhere near my planets and rocket and I'm unsure how to make my camera start in the center of the scene. My code is as follows,
// once everything is loaded, we run our Three.js stuff.
$(function() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var geometry = new THREE.CubeGeometry(10000,10000,10000);
var cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_ft.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_bk.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_up.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_dn.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_rt.png"), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("../assets/textures/skybox/ame_nebula/purplenebula_lf.png"), side: THREE.DoubleSide})
];
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add(cube);
// create the object group that contains all the sub-shapes
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
//display grid
//scene.add(new THREE.GridHelper(100,10));
var rocketMaterial = new THREE.MeshLambertMaterial({color: 0xEEEEEE});
var hingeMaterial = new THREE.MeshLambertMaterial({color: 0xFD1414});
/////////////////////////////////////////////////////////////////////////////////////////
var rocketAntennaOne = new THREE.CylinderGeometry( 0, 1, 1, 5);
var rocketAntennaOneMesh = new THREE.Mesh(rocketAntennaOne, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaTwo = new THREE.CylinderGeometry( 1, 1.5, 0.5, 5 );
var rocketAntennaTwoMesh = new THREE.Mesh(rocketAntennaTwo, hingeMaterial, new THREE.MeshPhongMaterial());
var rocketAntennaThree = new THREE.CylinderGeometry( 1.5, 2, 0.5, 5 );
var rocketAntennaThreeMesh = new THREE.Mesh( rocketAntennaThree,hingeMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyOne = new THREE.CylinderGeometry( 2, 4, 3, 5 );
var rocketBodyOneMesh = new THREE.Mesh(rocketBodyOne,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTwo = new THREE.CylinderGeometry( 4, 5.5, 3, 5 );
var rocketBodyTwoMesh = new THREE.Mesh(rocketBodyTwo,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyThree = new THREE.CylinderGeometry( 5.5, 7, 3, 5 );
var rocketBodyThreeMesh = new THREE.Mesh(rocketBodyThree,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFour = new THREE.CylinderGeometry( 7, 7.5, 3, 5 );
var rocketBodyFourMesh = new THREE.Mesh(rocketBodyFour,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyFive = new THREE.CylinderGeometry( 7.5, 8, 3.5, 5 );
var rocketBodyFiveMesh = new THREE.Mesh(rocketBodyFive,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySix = new THREE.CylinderGeometry( 8, 8, 5, 5 );
var rocketBodySixMesh = new THREE.Mesh(rocketBodySix,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodySeven = new THREE.CylinderGeometry( 8, 7.5, 3.5, 5 );
var rocketBodySevenMesh = new THREE.Mesh(rocketBodySeven,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyEight = new THREE.CylinderGeometry( 7.5, 7, 3.5, 5 );
var rocketBodyEightMesh = new THREE.Mesh(rocketBodyEight,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyNine = new THREE.CylinderGeometry( 7, 6.5, 3, 5 );
var rocketBodyNineMesh = new THREE.Mesh(rocketBodyNine,rocketMaterial, new THREE.MeshPhongMaterial());
var rocketBodyTen = new THREE.CylinderGeometry( 6.5, 6, 3, 5 );
var rocketBodyTenMesh = new THREE.Mesh(rocketBodyTen,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyUpper = new THREE.CylinderGeometry( 3.5, 4, 3.5, 5 );
var rocketBodyUpperMesh = new THREE.Mesh(rocketBodyUpper,rocketMaterial, new THREE.MeshPhongMaterial());
/////////////////////////////////////////////////////////////////////////////////////////
var rocketBodyLower = new THREE.CylinderGeometry( 2.75, 3, 2.5, 5 );
var rocketBodyLowerMesh = new THREE.Mesh(rocketBodyLower,rocketMaterial, new THREE.MeshPhongMaterial());
//var rocketWindow = new THREE.RingGeometry(5,6,30);
//var rocketWindowMesh = new THREE.Mesh(rocketWindow,hingeMaterial, new THREE.MeshPhongMaterial());
///////////////////////////////////////////////////////////////////////////////////////
var x = 0;
var y = 0;
var RocketFinOne = new THREE.Shape();
RocketFinOne.moveTo( x + 0, y + 0 );
RocketFinOne.lineTo( x + 0, y + 16);
RocketFinOne.lineTo( x + 7, y + 20);
RocketFinOne.lineTo( x + 7, y + 15);
RocketFinOne.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinOne,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinOneMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinTwo = new THREE.Shape();
RocketFinTwo.moveTo( x + 0, y + 0 );
RocketFinTwo.lineTo( x + 0, y + 16);
RocketFinTwo.lineTo( x + 7, y + 20);
RocketFinTwo.lineTo( x + 7, y + 15);
RocketFinTwo.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinTwo,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinTwoMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinThree = new THREE.Shape();
RocketFinThree.moveTo( x + 0, y + 0 );
RocketFinThree.lineTo( x + 0, y + 16);
RocketFinThree.lineTo( x + 7, y + 20);
RocketFinThree.lineTo( x + 7, y + 15);
RocketFinThree.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinThree,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinThreeMesh = new THREE.Mesh( geometry, material ) ;
var RocketFinFour = new THREE.Shape();
RocketFinFour.moveTo( x + 0, y + 0 );
RocketFinFour.lineTo( x + 0, y + 16);
RocketFinFour.lineTo( x + 7, y + 20);
RocketFinFour.lineTo( x + 7, y + 15);
RocketFinFour.lineTo( x + 2.5, y + 13);
var extrudeSettings = {amount: 0.01, bevelEnabled:true, bevelSegments:2,steps:2,bevelSize:1,bevelThickness:1};
var geometry = new THREE.ExtrudeGeometry( RocketFinFour,extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xFD1414 } );
var rocketFinFourMesh = new THREE.Mesh( geometry, material ) ;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var planetEarth = createPlanetEarthMesh(new THREE.SphereGeometry(100, 400, 400));
var planetMoon = createMoonMesh (new THREE.SphereGeometry (40,100,100));
var planetSun = createSunMesh (new THREE.SphereGeometry (150,100,100));
// add the sphere to the scene
scene.add(planetEarth);
scene.add(planetMoon);
scene.add(planetSun);
//scene.add(EarthMesh);
//////////////////////////////////////
scene.add(rocketAntennaOneMesh);
scene.add(rocketAntennaTwoMesh);
scene.add(rocketAntennaThreeMesh);
/////////////////////////////////////
scene.add(rocketBodyOneMesh);
scene.add(rocketBodyTwoMesh);
scene.add(rocketBodyThreeMesh);
scene.add(rocketBodyFourMesh);
scene.add(rocketBodyFiveMesh);
scene.add(rocketBodySixMesh);
scene.add(rocketBodySevenMesh);
scene.add(rocketBodyEightMesh);
scene.add(rocketBodyNineMesh);
scene.add(rocketBodyTenMesh);
///////////////////////////////////////
scene.add(rocketBodyUpperMesh);
scene.add(rocketBodyUpperMesh);
///////////////////////////////////////
//scene.add(rocketWindowMesh);
//////////////////////////////////////
scene.add( rocketFinOneMesh );
scene.add( rocketFinTwoMesh );
scene.add( rocketFinThreeMesh );
scene.add( rocketFinFourMesh );
rocketGroup.position.y = 100;
planetEarth.position.y=-100;
planetMoon.position.x=-100;
planetSun.position.x=200;
//Specify the position of the rocket cone
rocketAntennaOneMesh.position.y = 52.05;
rocketAntennaTwoMesh.position.y = 51.3;
rocketAntennaThreeMesh.position.y = 50.8;
rocketBodyOneMesh.position.y = 49.1;
rocketBodyTwoMesh.position.y = 46.1;
rocketBodyThreeMesh.position.y = 43.1;
rocketBodyFourMesh.position.y = 40.1;
rocketBodyFiveMesh.position.y = 36.9;
rocketBodySixMesh.position.y = 32.7;
rocketBodySevenMesh.position.y = 28.5;
rocketBodyEightMesh.position.y = 25.2;
rocketBodyNineMesh.position.y = 22;
rocketBodyTenMesh.position.y = 19;
/////////////////////////////////////////////////////////
rocketBodyUpperMesh.position.y = 16;
rocketBodyLowerMesh.position.y = 14;
////////////////////////////////////////////////////////
//rocketWindowMesh.position.y = 100;
//rocketwindowMesh.position.x = -20;
////////////////////////////////////////////////////
rocketFinOneMesh.position.x=-7;
rocketFinOneMesh.position.y=3;
rocketFinOneMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.position.x=6 ;
rocketFinTwoMesh.position.y=3;
rocketFinTwoMesh.rotation.z = 0.1 * Math.PI;
rocketFinTwoMesh.rotation.y = 1 * Math.PI;
rocketFinThreeMesh.position.x=0;
rocketFinThreeMesh.position.y=3;
rocketFinThreeMesh.position.z = 7;
rocketFinThreeMesh.rotation.z = 0.1 * Math.PI;
rocketFinThreeMesh.rotation.y = 0.5 * Math.PI;
rocketFinFourMesh.position.x=0;
rocketFinFourMesh.position.y=3;
rocketFinFourMesh.position.z = -6;
rocketFinFourMesh.rotation.z = 0.1 * Math.PI;
rocketFinFourMesh.rotation.y = 1.5 * Math.PI;
//Add the rocketCone to the lowpolyRocket group
rocketGroup.add(rocketAntennaOneMesh);
rocketGroup.add(rocketAntennaTwoMesh);
rocketGroup.add(rocketAntennaThreeMesh);
/////////////////////////////////////////
rocketGroup.add(rocketBodyOneMesh);
rocketGroup.add(rocketBodyTwoMesh);
rocketGroup.add(rocketBodyThreeMesh);
rocketGroup.add(rocketBodyFourMesh);
rocketGroup.add(rocketBodyFiveMesh);
rocketGroup.add(rocketBodySixMesh);
rocketGroup.add(rocketBodySevenMesh);
rocketGroup.add(rocketBodyEightMesh);
rocketGroup.add(rocketBodyNineMesh);
rocketGroup.add(rocketBodyTenMesh);
//////////////////////////////////////////
rocketGroup.add(rocketBodyUpperMesh);
rocketGroup.add(rocketBodyLowerMesh);
/////////////////////////////////////////
rocketGroup.add(rocketFinOneMesh);
rocketGroup.add(rocketFinTwoMesh);
rocketGroup.add(rocketFinThreeMesh);
rocketGroup.add(rocketFinFourMesh);
//position and point the camera to the center of the scene
camera.position.x = -400;
camera.position.y = 0;
camera.position.z = 3;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.PointLight(0xffffff);
spotLight.position.set(-200, 50, 150);
spotLight.castShadow = true;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(renderer.domElement);
var controls = new function() {
this.EarthMoonRotationSpeed = 1.0;
this.EarthMoonRotationSpeed = 1.0;
};
var gui = new dat.GUI();
gui.add(controls, 'EarthMoonRotationSpeed', 0, 5);
// call the render function
var angle = 0;
render();
function render() {
stats.update();
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetEarth.rotation.y = angle;
angle += 0.002 * controls.EarthMoonRotationSpeed;
planetMoon.rotation.y = angle;
// render using requestAnimationFrame
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function createPlanetEarthMesh(geom) {
var loader = new THREE.TextureLoader();
var planetEarthTexture = loader.load("../assets/textures/planets/Earth.png");
var normalEarthTexture = loader.load("../assets/textures/planets/EarthNormal.png");
var planetEarthMaterial = new THREE.MeshPhongMaterial({map: planetEarthTexture, bumpMap: normalEarthTexture});
// create a multimaterial
var planetEarthMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetEarthMaterial]);
return planetEarthMesh;
}
function createMoonMesh(geom) {
var loader = new THREE.TextureLoader();
var planetMoonTexture = loader.load("../assets/textures/planets/moon.jpg");
var normalMoonTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetMoonMaterial = new THREE.MeshPhongMaterial({map: planetMoonTexture, bumpMap: normalMoonTexture});
// create a multimaterial
var planetMoonMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMoonMaterial]);
return planetMoonMesh;
}
function createSunMesh(geom) {
var loader = new THREE.TextureLoader();
var planetSunTexture = loader.load("../assets/textures/planets/sun.jpg");
//var normalSunTexture = loader.load("../assets/textures/planets/moonbump.jpg");
var planetSunMaterial = new THREE.MeshPhongMaterial({map: planetSunTexture});
//bumpMap: normalMoonTexture
// create a multimaterial
var planetSunMesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetSunMaterial]);
return planetSunMesh;
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
body {
margin: 0;
}
<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://threejs.org/examples/js/utils/SceneUtils.js"></script>
The snippet won't display because "SceneUtils.js" don't seem to work. The project is made in an older version of three.js I'm assuming (unsure how to check the version) since I had to create this project with a default-project. (It is part of an assignment and we were asked to use that version of three.js). When I run the project on my computer it works though since I have that version.
Is there anyway I can link the script properly so you may all view my project and help?
---------------------EDIT-----------------------------------
Okay, so I realized that the error might be to do with my rendering? it seems like the skybox i was making was too big, but when i'd make it much smaller, it would view. Although if I'd look at certain angles, part of the cube with vanish as if it's not being rendered.
As you can see from this screenshot https://imgur.com/a/iYorLxP
You need to narrow down your questions to one issue per question. If you want to figure out how to build a working skybox, there is no reason for all that code including your rocket parts and planets and positions to be part of your question. It creates a huge wall of code that nobody wants to read through on their spare time.
That being said, that's a pretty bad tutorial that's asking you to do a lot of unnecessary work. Three.js already comes with a built-in and easier way to create a skybox: the CubeTextureLoader:
var r = "https://threejs.org/examples/textures/cube/Park3Med/";
var urls = [
r + "px.jpg",
r + "nx.jpg",
r + "py.jpg",
r + "ny.jpg",
r + "pz.jpg",
r + "nz.jpg"
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
scene.background = textureCube;
The code above was taken directly from this example
With this method, you don't have to worry about your camera's position at all; it'll always be in the center of the cube, no matter how far your camera moves in any direction.
And please, learn how to ask a question with a minimal, complete and verifiable example so it makes it easier for people to help you out and solve one problem at a time.
From your edit, it seems the problem is your camera frustum settings. This specifies how far objects can be away from the camera and still be rendered. Some parts of your sky box aren't within the far viewing plane, so are being cut off, resulting in the white background of your scene appearing. To fix this, increase your far frustum to above 1000 when you create your camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);
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!
so the problem is straightforward. No shadow in the scene.
At first I thought it was caused by the imported JSON format 3D models, so I added a basic cube in the middle of the scene, still not working.
Light
centerLight = new THREE.SpotLight('#fff',3);
centerLight.castShadow = true;
centerLight.shadowMapWidth = 1024;
centerLight.shadowMapHeight = 1024;
centerLight.shadowCameraNear = 500;
centerLight.shadowCameraFar = 4000;
centerLight.shadowCameraFov = 30;
centerLight.position.set(0,20,0);
centerLight.add(new THREE.Mesh(new THREE.SphereGeometry(1, 16, 8), new THREE.MeshBasicMaterial({
color: '#00fa00',
})));
scene.add(centerLight);
Cube
var shadowMakerGeo = new THREE.BoxGeometry(1,1,1);
var shadowMakerMar = new THREE.MeshLambertMaterial({color:'#000'});
var shadowMaker = new THREE.Mesh(shadowMakerGeo,shadowMakerMar);
shadowMaker.position.set(0,9,0);
shadowMaker.castShadow = true;
scene.add(shadowMaker);
Plane used to let the shadow cast on
var planeGeo = new THREE.PlaneBufferGeometry( 50, 50);
var planeMar = new THREE.MeshLambertMaterial({color:'#fff'});
plane = new THREE.Mesh(planeGeo,planeMar);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
And I already did this:
renderer.shadowMapEnabled = true;
All Code here https://github.com/ZZYW/is_shame_necessary_website/blob/master/static/js/homepage/navigation.js