threejs第一步

// 引入threejs包

import * as THREE from 'three';

// 创建场景

const sence = new THREE.Scene();

 

// 创建相机 视点

const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);

// 设置相机的位置

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

 

// 创建一个渲染器

const renderer = new THREE.WebGLRenderer();

// 设置渲染器的尺寸

renderer.setSize(window.innerWidth,window.innerHeight);

 

// 把渲染器添加到

document.body.appendChild(renderer.domElement);

 

// 添加立方体

const box =  new THREE.BoxGeometry(2,2,2)

// wireframe:true  立方体是线框还是实体

// 添加材质

const material = new THREE.MeshBasicMaterial({color:0x00ff00,wireframe:true});

const cube =new  THREE.Mesh(box,material);

// 添加到场景里面

sence.add(cube);

添加实体

渲染

renderer.render(sence,camera);