从three.js 开始

02 本地运行
本地运行 加https 不能直接 localhost

1 本地

2 parcel js （类似webpack 等）
新建文件夹
npm init

npm install parcel-bundler 普通依赖
--save-dev 是设置为开发依赖
配置package.json
"scripts": {
"dev":"parcel src/index.html",
"build":"parcel build src/index.html",
"test": "echo "Error: no test specified" && exit 1"
},
npm install three --save

npm run dev 看效果
直接点击index 不行 会出现情况

3 开始

import * as THREE from 'three'
//  导入轨道控制
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

console.log('t',THREE)

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

//  2 相机  真实 透视相机  卡通 正交相机
// 透视
const camera =  new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)

camera.position.set(0,0,10)

scene.add(camera)

//  物体

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
console.log(renderer)
// canvas 添加到 body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染出来
// renderer.render(scene,camera)

//  创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)

function render(){
    renderer.render(scene,camera)
    requestAnimationFrame(render)
}

render();