threejs 复习笔记

import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js'
import {OrbitControls} from 'https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js'
import {OrbitControls} from './OrbitControls.js'


// 创建相机
const camera=new THREE.PerspectiveCamera()
    // 调整相机位置
    camera.position.z=10
    camera.position.y=3
    camera.position.x=2

// 创建场景
const scene=new THREE.Scene()

    // 创建立方体
    const geoment=new THREE.BoxGeometry()
    // 创建材质
    const material=new THREE.MeshBasicMaterial({color:0x00ff00})
    // 网格:由几何体+材质组成的物体,可以用来调整位置
    const cube=new THREE.Mesh(geoment,material)
    // 调整相机位置
    cube.position.set(0,2,0)
    // 将物体添加到场景
    scene.add(cube)

    // 添加网格地面
    const gridhelper=new THREE.GridHelper(10,10)
    // 将地面添加到场景
    scene.add(gridhelper)


// 创建一个渲染器
const renderer=new THREE.WebGLRenderer()
// 调整窗口大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 将渲染器DOM挂载到页面
document.body.appendChild(renderer.domElement)


// 添加轨道控制器传入相机和DOM
const controle=new OrbitControls(camera,renderer.domElement)


// 让立方体动起来
function animate(){
    // 动画效果方法
    requestAnimationFrame(animate)
    cube.rotation.x +=0.01
    cube.rotation.y +=0.02
    cube.rotation.z +=0.03

    // 轨道控制器更新
    controle.update()
    // 渲染器渲染，传入场景与相机
    renderer.render(scene,camera)
}
// 启动
animate()

export function nihao(){
    console.log('??????????????????????????')
}