threejs (一) 创建一个场景

引入

npm install three
import * as THREE from 'three';const scene = new THREE.Scene();

或者使用bootCDN复制对应的版本连接

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.js"></script>

基础知识

场景、相机、渲染器

• 通过THREE.Scene创建一个场景
• 通过THREE.PerspectiveCamera创建一个相机
• 通过THREE.WebGLRenderer创建一个渲染器，方便将物体渲染到场景中

展示一个立方体

const canvas = document.getElementById('c');const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;// 创建3D场景const scene = new THREE.Scene();// 创建辅助坐标系const axesHelper = new THREE.AxesHelper();scene.add(axesHelper);// 创建立方体const box = new THREE.BoxGeometry(1, 1, 1);// 创建立方体的材质const material = new THREE.MeshBasicMaterial({color: 0x1890ff,});// 创建物体对象const mesh = new THREE.Mesh(box, material);scene.add(mesh);// 创建相机对象const aspect = width / height;const camera = new THREE.OrthographicCamera(-aspect,aspect,aspect,-aspect,0.01,100); // 透视相机// 设置相机位置camera.position.set(1, 1, 3); // 相机默认的坐标是在(0,0,0);// 设置相机方向camera.lookAt(scene.position); // 将相机朝向场景// 将相机添加到场景中scene.add(camera);// 创建渲染器const renderer = new THREE.WebGLRenderer({canvas,});// 设置渲染器大小renderer.setSize(window.innerWidth, window.innerHeight);// 执行渲染renderer.render(scene, camera);