import * as THREE from '../../node_modules/three'
import { OrbitControls } from '../../node_modules/three/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    45, //视角
    window.innerWidth / window.innerHeight, //宽高比
    0.1, //近平面
    1000 //远平面
)


//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

//创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)

//创建几何体
const geometry = new THREE.BoxGeometry(1,1,1)
//创建材质
const material = new THREE.MeshBasicMaterial({ color: 'white' })
//创建网格
const cube = new THREE.Mesh(geometry,material)

//将网格添加到场景中
scene.add(cube)

//设置相机位置
camera.position.z = 5
camera.position.y = 2
camera.position.x = 2
camera.lookAt(0,0,0)

//添加事件坐标辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

const controls = new OrbitControls( camera, renderer.domElement );
//设置阻尼惯性
controls.enableDamping = true
//设置阻尼系数
controls.dampingFactor = 0.05

//重复旋转几何体
function animate(){
    requestAnimationFrame(animate)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    controls.update();

    //渲染
    renderer.render(scene,camera)
} 
animate()

几何体Geometry

通过BoxGeometry这个构造函数可以创建立方体；通过SphereGeometry可以创建球体。

材质Material

通过MeshBasicMaterial可以创建一个材质对象，构造函数的参数是一个对象，对象包含了颜色、透明度等属性，颜色值表示方法可以是英文单词也可以使16进制RGB三原色模型。

光源Light

通过PointLight可以创建一个光源对象，参数可以定义光照强度。

相机Camera

通过PerspectiveCamera可以创建一个透射投影相机对象，通过OrthographicCamera可以创建一个正射投影相机对象。

相机构造函数的前四个参数定义的是拍照窗口的大小，camera.position和camera.lookAt定义的是相机的位置和拍照的方向，可以更改camera.position.set重新定义相机的位置。

整个程序的结构

1、场景

（1）网络模型Mesh

几何体：形状、尺寸

材质：颜色、贴图、透明度

（2）光照

颜色、

分类：环境光、点光源、平行光

2、相机

（1）位置

（2）视线方向

（3）投影方式：透射投影、正射投影

3、渲染器

（1）渲染器创建：WebGLRender()

（2）开始渲染：.render(scene,camera)

（3）domElement属性：canvas对象