如何更改代码以使相机位置更改为鼠标单击坐标？

Question

我想我需要某种类型的 onclick Eventlistener 但我将如何在 renderloop 中使用它以便相机位置更新？

Answer 1

有任何想法吗？

//.................SETUP................//
import {
  WebGLRenderer,
  PerspectiveCamera,
  Scene,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
  Group,
  PlaneGeometry,
  AxesHelper,
  GridHelper,
  DoubleSide,
  DirectionalLight,
  AmbientLight,
  MeshStandardMaterial,
  DirectionalLightHelper,
  Fog,
  TextureLoader,
  CubeTextureLoader,
  SphereGeometry,
  CameraHelper,
  Color,
  ShaderMaterial,
  SphereBufferGeometry,
  BackSide,
} from './three.module.js';
import { MapControls, OrbitControls } from './q.js';
import vShader from './vertex.glsl.js';
import fShader from './fragment.glsl.js';
import {GLTFLoader} from './GLTFLoader.js';
//................PROGRAM...............//
var renderer, camera, scene, light, light1, geometry, material, mesh;
// renderer
renderer = new WebGLRenderer({canvas:
document.getElementById('Canvas'), antialias: true, alfa: true});
//alfa: true gör att tomma pixlar i canvasen visar underliggande html-innehåll så att om man exempelvis skulle ha en bild under ett tomt canvas-element så kan man ändå se bilden. 
//renderer.setClearColor(0x555555);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; 
// camera
camera = new PerspectiveCamera(35, window.innerWidth / 
window.innerHeight, 0.1, 6000);
camera.position.set(0, 0, 100);
//camera.lookAt(0, 0, 0);
camera.updateProjectionMatrix;
//controls
var orbitcontrol = new OrbitControls(camera, renderer.domElement);
orbitcontrol.autoRotate = true;
//scene
scene = new Scene();
//lights
var ambientlight = new AmbientLight(0x333333, 0.2);
scene.add(ambientlight);
var sun = new DirectionalLight(0xffffff, 0.4);
sun.castShadow = true;
scene.add(sun);
sun.position.set(0, 40, 0);
//shadow map
sun.shadow.camera.top = 25;
sun.shadow.camera.bottom = - 25;
sun.shadow.camera.left = - 25;
sun.shadow.camera.right = 25;
sun.shadow.camera.near = 0.1;
sun.shadow.camera.far = 100;
//fog
//scene.fog = new Fog(0xffffff, 0, 200); 
//helpers
var gridhelper = new GridHelper(10, 10);
scene.add(gridhelper);
var axishelper = new AxesHelper(3);
scene.add(axishelper);
var directionallighthelper = new DirectionalLightHelper(sun, 10, 0xff0000);
scene.add(directionallighthelper);
scene.add( new CameraHelper( sun.shadow.camera ) );
//material loaders
var bildimport = new TextureLoader().load('a.jpg');
var bildimport2 = new TextureLoader().load('träd.jpg');
var textureLoader = new TextureLoader();
//scene.background = textureLoader.load('a.jpg');
//object
  //gltfl-object
  const loader = new GLTFLoader();
  loader.load('wraith.glb', function(gltf){
    const model = gltf.scene;
    model.position.set(0, -120, 0);
    scene.add(model);

  })
  //sky box
  let materialarray = [];

  let texture1 = new TextureLoader().load('träd.jpg'); //1
  let texture2 = new TextureLoader().load('träd.jpg'); //2
  let texture3 = new TextureLoader().load('träd.jpg'); //3
  let texture4 = new TextureLoader().load('träd.jpg'); //4
  let texture5 = new TextureLoader().load('träd.jpg'); //5
  let texture6 = new TextureLoader().load('träd.jpg'); //6

  materialarray.push(new MeshBasicMaterial({map: texture1})); //1
  materialarray.push(new MeshBasicMaterial({map: texture2})); //2
  materialarray.push(new MeshBasicMaterial({map: texture3})); //3
  materialarray.push(new MeshBasicMaterial({map: texture4})); //4
  materialarray.push(new MeshBasicMaterial({map: texture5})); //5
  materialarray.push(new MeshBasicMaterial({map: texture6})); //6

for(let i=0; i<6; i++){
  materialarray[i].side = BackSide;
}

  let skyboxGeometry = new BoxGeometry(1000, 1000, 1000);
  let skybox = new Mesh(skyboxGeometry, materialarray);
  scene.add(skybox);
  //shader object
  var geometryShader = new SphereGeometry(1, 50, 50)
  var materialShader = new ShaderMaterial({
    vertexShader: vShader,
    fragmentShader: fShader,
  }) 
  var meshShader = new Mesh(geometryShader, materialShader);
  scene.add(meshShader);
//sphere
var randomcolor1 = new Color().setRGB(Math.random() * 16, Math.random() * 16, Math.random() * 16);
var geometrySphere = new SphereGeometry(10, 15);
var materialSphere = new MeshStandardMaterial({
  color: randomcolor1,
  flatShading: true,
  //wireframe: true,
});
var meshSphere = new Mesh(geometrySphere, materialSphere);
scene.add(meshSphere);
meshSphere.position.set(0, 20, 0)
meshSphere.receiveShadow = true;
meshSphere.castShadow = true;
//cube
geometry = new BoxGeometry(1, 1, 1);
var alt_material = [
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
new MeshBasicMaterial({map: bildimport2}),
new MeshBasicMaterial({map: bildimport}),
];
material = new MeshStandardMaterial({
  color: 0xff00ff,
  map: bildimport2,
});
mesh = new Mesh(geometry, alt_material);
mesh.position.set(0, 40, 0);
mesh.castShadow = true;
scene.add(mesh);
//plane
var randomcolor2 = new Color().setRGB(Math.random() * 16, Math.random() * 16, Math.random() * 16);
var geometry2 = new PlaneGeometry(50, 50); 
var material2 = new MeshStandardMaterial({
  color: randomcolor2,
  map: bildimport,
  side: DoubleSide,  // Gör att planet färgas på båda sidor isf bara på ovansidan.
});
var mesh2 = new Mesh(geometry2, material2);
mesh2.receiveShadow = true;
scene.add(mesh2);
mesh2.rotation.x = -0.5 * Math.PI;
//groups
// Event listeners
    // Event listener to behold proportions whene resize 
window.addEventListener('resize', function(){
  var widthResize = window.innerWidth;
  var heightResize = window.innerHeight;
  renderer.setSize(widthResize, heightResize);
  camera.aspect = widthResize/heightResize;
  camera.updateProjectionMatrix;
});
//renderer loop 
requestAnimationFrame(render);
var i = 0;
var increase_of_i = 0.01;
function render() {
orbitcontrol.update; //
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
meshSphere.rotation.y += 0.01;
meshSphere.rotation.x += 0.01;
meshSphere.rotation.z += 0.01;
// mesh.position.y = 100 * Math.abs(Math.sin(i));
mesh.scale.x = 1 + Math.abs(Math.sin(2*i));
mesh.scale.y = 1 + Math.abs(Math.sin(2*i));
mesh.scale.z = 1 + Math.abs(Math.sin(2*i));
i += increase_of_i;
renderer.render(scene, camera);
requestAnimationFrame(render);
}