threejs基础知识2

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

//代码中加入
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 0, 0);
controls.update();


function render() {
 
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
 
  /*cubes.forEach((cube, ndx) => {
    const speed = 1 + ndx * .1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });*/
 
  renderer.render(scene, camera);
 
  //requestAnimationFrame(render);
}

   // SpotLight
   // RectAreaLight
/*
环境光会均匀的照亮场景中的所有物体。
环境光不能用来投射阴影，因为它没有方向。
*/
   const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
   scene.add(ambientLight)

  /*
  平行光（DirectionalLight）
  平行光是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。
 常常用平行光来模拟太阳光的效果。 太阳足够远，因此我们可以认为太阳的位置是无限远
，所以我们认为从太阳发出的光线也都是平行的。
  */
   const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.3)
   directionalLight.position.set(1, 0.25, 0)
   scene.add(directionalLight)

/*
半球光（HemisphereLight）
光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。
半球光不能投射阴影。
*/
   const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.3) 
// simulate kind of bouncing light
   scene.add(hemisphereLight)

/*
点光源（PointLight）
从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
*/
   const pointLight = new THREE.PointLight(0xff9000, 0.5) 
// point lighting in every direction
   // pointLight.position.x = 2
   // pointLight.position.y = 3
   // pointLight.position.z = 4
   pointLight.position.set(1, -0.5, 1)
   scene.add(pointLight)

/*
平面光光源（RectAreaLight）
平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
注意事项:
不支持阴影。
只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
你必须在你的场景中加入 RectAreaLightUniformsLib，并调用 init()。
*/
   const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 2, 1, 1)
   rectAreaLight.position.set(-1.5, 0, 1.5)
   rectAreaLight.lookAt(new THREE.Vector3())

   scene.add(rectAreaLight)

/*
聚光灯（SpotLight）
光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。
*/
   const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
   spotLight.position.set(0, 2, 3)
   spotLight.target.position.x = -0.75 
// target is not in the scene you need to add it to see the rotation

   scene.add(spotLight.target)
   scene.add(spotLight)

 /**
    * Animate
    * Clock,该对象用于跟踪时间。如果performance.now可用，则 Clock 对象通过该方法实现，否则回落到使用略欠精准的Date.now来实现。
    */
   const clock = new THREE.Clock()

   const tick = () => {
     const elapsedTime = clock.getElapsedTime()

     // Update the sphere
     sphere.position.x = Math.cos(elapsedTime) * 10
     sphere.position.z = Math.sin(elapsedTime) * 1.5
     sphere.position.y = Math.abs(Math.sin(elapsedTime * 9))

     // Update the shadow
     sphereShadow.position.x = sphere.position.x
     sphereShadow.position.z = sphere.position.z
     sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3

     // Update controls
     controls.update()

     // Render
     renderer.render(scene, camera)

     // Call tick again on the next frame
     window.requestAnimationFrame(tick)
   }