初面网

Appearance

初始化项目 ​

安装依赖 ​

npm init -y

npm install -D parcel three

three就是threejs，parcel是一个轻便的打包工具。

基本目录 ​

根目录下新建src文件夹，里面创建这些文件夹和文件。

│  index.html
│
├─assets
│  ├─css
│  │      style.css
│  │
│  └─imgs
└─main
        main.js
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Document</title>
</head>
<body>
  <script src="./main/main.js" type="module"></script>
</body>
</html>
javascript
// main.js
import * as THREE from "three";

初始代码 ​

这里提供three项目最基础的代码

javascript
  // 1、创建场景
  scene = new THREE.Scene();

  // 2、创建相机
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // 设置相机位置
  camera.position.set(0, 0, 10);
  scene.add(camera);

  // 添加物体
  // 创建几何体
  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  // 根据几何体和材质创建物体
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  // 将几何体添加到场景中
  scene.add(cube);

  // 初始化渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染的尺寸大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio( window.devicePixelRatio );
  // console.log(renderer);
  // 将webgl渲染的canvas内容添加到body
  document.body.appendChild(renderer.domElement);

  // 使用渲染器，通过相机将场景渲染进来
  renderer.render(scene, camera);

  function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
  }

  animate();

监听画面尺寸变化 ​

窗口尺寸变化时重绘画面。

javascript
window.addEventListener("resize", () => {
  // 更新宽高比
  camera.aspect = window.innerWidth / window.innerHeight;

  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

全屏 ​

javascript
window.addEventListener("dblclick", () => {
  const isFull = document.fullscreenElement;
  if(!isFull){
    renderer.domElement.requestFullscreen();
    isFull = true;
  }
  document.exitFullscreen();
});