import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'const width = window.innerWidth;
const height = window.innerHeight;//创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color('#65762c'); //创建几何体
const geometry = new THREE.SphereGeometry(50,50,50)
const material = new THREE.MeshLambertMaterial({color:0x00ffff,
})
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh)//创建平行光
const dirLight2 = new THREE.DirectionalLight(0xFFFFFF, 1);
dirLight2.position.set(100,100,100);
scene.add(dirLight2);//添加环境光
const ambient = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambient)//光源辅助观察
// const pointLightHelper = new THREE.DirectionalLightHelper(dirLight2, 2)
// scene.add(pointLightHelper)//AxesHelper 辅助观察坐标系
// const axesHelper = new THREE.AxesHelper(100);
// scene.add(axesHelper)//相机
const camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
//相机在three.js三维坐标系中的位置,根据需要设置相机位置具体值
camera.position.set(100,200,250);
//相机观察目标指向three.js坐标系原点,相机的位置
camera.lookAt(0,0,0)//创建渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置three.js渲染区域的尺寸
renderer.setSize(width,height);//three.js执行渲染命令会输出一个canvas画布
document.body.appendChild(renderer.domElement);//循环渲染
function render(){renderer.render(scene,camera);requestAnimationFrame(render);
}render();//设置相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);//如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景,监听键盘、鼠标事件
controls.addEventListener('change',function(){renderer.render(scene,camera);  //执行渲染操作// console.log('camera.position',camera.position)
})