three.js

[Solved] How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]

by

I guess, you want the point you are looking at your sphere (probably with earth texture) to be shown on google maps google which requires latitude and longitude. Using 2D screen coordinates seems a weird method to me. Your camera is probably around the sphere which is at the center of the coordinate system. I … Read more

[Solved] Optimize cube rendering in threejs

by

Finally, I get the solution! <script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.js”></script> <script> setTimeout(()=>{ s=1.5 k=[] onmousedown=()=>{document.body.requestPointerLock()} onmousemove=(e)=>{ if(document.pointerLockElement===document.body){ vector.xa-=0.01*e.movementX vector.ya-=0.01*e.movementY }} onkeydown=onkeyup=function(e){k[e.keyCode]=e.type==”keydown”} document.body.style.backgroundColor=”black” document.body.style.margin=”0″ scene=new THREE.Scene() camera=new THREE.PerspectiveCamera(75,1,0.1,16);vector={xs:0,ys:0,zs:0,xa:0,ya:0} camera.position.set(0,0,0);renderer=new THREE.WebGLRenderer() document.body.appendChild(renderer.domElement) light=new THREE.PointLight(“rgb(0,127,255)”,1,8);light.position.set(0,0,0);scene.add(light) function render(){ camera.aspect=window.innerWidth/window.innerHeight camera.updateProjectionMatrix() renderer.setSize(innerWidth,innerHeight) requestAnimationFrame(render) renderer.render(scene,camera) } setInterval(()=>{ if(vector.ya<-1){vector.ya=-1} if(1<vector.ya){vector.ya=1} if(k[37]){vector.xa+=0.1} if(k[38]){if(vector.ya<1.2){vector.ya+=0.1}} if(k[39]){vector.xa-=0.1} if(k[40]){if(-1.2<vector.ya){vector.ya-=0.1}} if(k[87]){vector.xs+=0.01*Math.sin(vector.xa)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa)*Math.cos(vector.ya)} if(k[83]){vector.xs-=0.01*Math.sin(vector.xa)*Math.cos(vector.ya);vector.ys-=0.01*vector.ya;vector.zs-=0.01*Math.cos(vector.xa)*Math.cos(vector.ya)} if(k[65]){vector.xs+=0.01*Math.sin(vector.xa+Math.PI/2)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa+Math.PI/2)*Math.cos(vector.ya)} if(k[68]){vector.xs+=0.01*Math.sin(vector.xa-Math.PI/2)*Math.cos(vector.ya);vector.ys+=0.01*vector.ya;vector.zs+=0.01*Math.cos(vector.xa-Math.PI/2)*Math.cos(vector.ya)} camera.position.x+=vector.xs;vector.xs=vector.xs*9/10 camera.position.y+=vector.ys;vector.ys=vector.ys*9/10 camera.position.z+=vector.zs;vector.zs=vector.zs*9/10 light.position.set(camera.position.x,camera.position.y,camera.position.z) camera.lookAt(new THREE.Vector3(camera.position.x+Math.sin(vector.xa)*Math.cos(vector.ya),camera.position.y+vector.ya,camera.position.z+Math.cos(vector.xa)*Math.cos(vector.ya))) if(s<Math.max(Math.pow(camera.position.x*camera.position.x,1/2),Math.pow(camera.position.y*camera.position.y,1/2),Math.pow(camera.position.z*camera.position.z,1/2))+12){sy=1.5 … Read more