创建一个场景"/>
threejs (一) 创建一个场景
引入
npm install three
import * as THREE from 'three';const scene = new THREE.Scene();
或者使用bootCDN复制对应的版本连接
<script src=".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);
更多推荐
threejs (一) 创建一个场景
发布评论